Geolocation API JavaScript访问用户的当前位置信息
Geolocation API在浏览器中的实现是navigator.geolocation对象,常用的有以下方法。
1、第一个方法是getCurrentPosition()
调用这个方法就会触发请求用户共享地理定位信息的对话框。比如在火狐中的对话框:
这个方法接收3个参数:成功回调函数、可选的失败回调函数和可选的选项对象。
①成功回调函数会接收一个Position对象参数,有两个属性:coords和timestamp。
coords对象中包含下列与位置相关的信息。
- latitude,十进制纬度
- longitude,十进制经度
- accuracy,精度,米
有些浏览器还会提供海拔/海拔精度/速度等信息。Web常用的是纬度和经度。
比如显示用户的位置:
navigator.geolocation.getCurrentPosition(function(position){
$(".content div.item2").text("你的位置在:北纬"+position.coords.latitude+" 东经"+position.coords.longitude);
});
②失败回调函数,会接收一个对象,包含两个属性,message和code,前者保存错误文本消息,后者保存错误码,有1—用户拒绝共享,2-位置无效,3-超时。大多数情况下将错误信息保存在日志文件中。演示:
navigator.geolocation.getCurrentPosition(function(position){
$(".content div.item2").text("你的位置在:北纬"+position.coords.latitude+" 东经"+position.coords.longitude);
},function(error){
$(".content div.item2").text(error.code+","+error.message);
});
在Chrome中拒绝共享时拒绝:
会显示:错误码1,信息是用户拒绝共享。
③第三个参数是选项对象,用于设定信息的类型,可以设置的选项有三个:
- enableHighAccuracy,布尔值,尽可能使用最精确的位置信息。
- timeout,等待位置信息的最长时间,毫秒
- maximumAge,上次取得的坐标信息的有效时间,毫秒,如果时间到则重新获取坐标信息。
如:
navigator.geolocation.getCurrentPosition(function(position){
$(".content div.item2").text("你的位置在:北纬"+position.coords.latitude+" 东经"+position.coords.longitude);
},function(error){
$(".content div.item2").text(error.code+","+error.message);
},{
enableHighAccuracy:false,
timeout:1000,
maximumAge:5000
});
不需要特别精确的境况下,建议enableHighAccuracy为false,否则耗时耗电。maximumAge值可以是Infinity,表示始终使用上次的坐标信息。
2、另一个方法,watchPosition(),跟踪用户的位置。接收的参数与getCurrentPosition()一致。
该方法第一次取得位置信息后,会就地等待系统发出位置改变的信号。
可以调用clearWatch()方法取消跟踪。
内容来源于JavaScript高级程序设计。
Geolocation API JavaScript访问用户的当前位置信息的更多相关文章
- javascript 获取用户当前 经纬度 位置
<!DOCTYPE html> <html> <body><p>http协议支持部分浏览器</p><p>https支持所有浏览器 ...
- HTML5 Geolocation API地理定位整理(一)
HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9+, ...
- HTML5地理定位-Geolocation API
HTML5提供了一组Geolocation API,来自navigator定位对象的子对象,获取用户的地理位置信息Geolocation API使用方法:1.判断是否支持 navigator.geol ...
- HTML5+规范:Geolocation(管理设备位置信息) 定位
Geolocation模块管理设备位置信息,用于获取地理位置信息,如经度.纬度等.通过plus.geolocation可获取设备位置管理对象.虽然W3C已经提供标准API获取位置信息,但在某些平台存在 ...
- Geolocation API
Geolocation API--地理定位 navigator.geolocation getCurrentPosition() 触发请求用户共享地理定位信息的对话框 接收3个参数: 1.成功回调函数 ...
- 获取用户当前位置信息的两种方法——H5、微信
在之前的 调用百度地图API的总结 中获取当前位置信息我用的是 H5 ,其实微信也提供了获取用户地理位置的方法,现将这两种方法都贴出来,看情况选择使用. 一.H5 获取当前地理位置得到经纬度 // H ...
- 如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介 一.总结 一句话总结:Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...
- HTML5 Geolocation用来定位用户的位置。
HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...
- Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。
Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等. Cordova还提供了一组统一的JavaScript类库,以及为这 ...
随机推荐
- iOS Swift-元组tuples(The Swift Programming Language)
iOS Swift-元组tuples(The Swift Programming Language) 什么是元组? 元组(tuples)是把多个值组合成一个复合值,元组内的值可以使任意类型,并不要求是 ...
- Tomcat启动找不到JRE_HOME的解决方法
在配置测试环境时,将生产服务器的Tomcat目录打包过来后解压后,启动Tomcat后,发现如下问题: [tomcat@gsp bin]$ ./shutdown.sh Using CATALINA_BA ...
- Java:Remote Debug
Java Remote Debug -Xdebug -Xnoagent -Djava.compiler=NONE -Xrunjdwp:transport=dt_socket,server=y,add ...
- 搭建自己的PHP框架心得(一)
h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h ...
- sql server: sql script
select ProductGUID,ProductName,ProjectGUID from dbo.Product /* F637A079-E22B-4E50-87E9-000147B1B1F4 ...
- MVC中的ActionLink生成的属性名称 中划线的解决办法
当使用ActionLink来生成链接属性时,由于中划线的变量名称不符合命名规则,那么直接写中划线的变量时无法编译,此时只要改为下划线即可.Razor 引擎会自动转为中划线. 即 data_icon ...
- js的encodeURIComponent与java的URLEncoder的区别
js中的encodeURIComponent这个函数和java中的URLEncoder有少数不一样的.如下表格就是区别 ascii java js + %20 ! %21 ! ' %27 ' ( ...
- .NET 类型(Types)的那些事
引言 您是.Net工程师?那 .NetFramework中的类型您知道有三大类吗?(除了引用类型和值类型,还有?) 引用类型一定在“堆”上,值类型一定在“栈”上? 那引用类型在内存中的布局细节您又知道 ...
- 嵌入式Linux驱动学习之路(十六)输入子系统
以前写的一些输入设备的驱动都是采用字符设备处理的.问题由此而来,Linux开源社区的大神们看到了这大量输入设备如此分散不堪,有木有可以实现一种机制,可以对分散的.不同类别的输入设备进行统一的驱动,所以 ...
- simpleCart的简单使用及配置
simpleCart的功能就不用解释,购物车,很6.官网上的说明太模糊了,还是GIHUb上的好一点:https://github.com/wojodesign/simplecart-js/ 文章解决问 ...