js地理定位对象 navigator.geolocation
浏览器信息的存储对象(navigator);
在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息。
navigator.geolocation的三个方法:
1. getCurrentPosition()
2. watchPosition()
3. clearWatch()
getCurrentPosition()
使用方法:navigator.geolocation.getCurrentPosition(successCallback, [errorCallback] , [positionOptions]);
A) successCallback 获取定位成功时执行的回调函数 eg: function(position){alert("纬度:"+position.coords.latitude+";经度:"+position.coords.longitude)};
successCallback返回一个地理数据对象position作为参数,该对象有属性timestamp和coords。timestamp表示该地理数据创建时间(时间戳);coords包括另外七个属性:
1. coords.latitude:估计纬度
2. coords.longitude:估计经度
3. coords.altitude:估计高度
4. coords.accuracy:所提供的以米为单位的经度和纬度估计的精确度
5. coords.altitudeAccuracy:所提供的以米为单位的高度估计的精确度
6. coords.heading: 宿主设备当前移动的角度方向,相对于正北方向顺时针计算
7. coords.speed:以米每秒为单位的设备的当前对地速度
PS:firefox下还有address属性,可以获取详细地址,不过我得到的地址是错误的,使用方法:position.address.city,具体如下:
streetNumber:200号
street:人民大道
premises:null
city:上海市
county:null
region:上海市
country:中国
countryCode:CN
postalCode:null
getInterfaces:function getInterfaces() { [native code] }
getHelperForLanguage:function getHelperForLanguage() { [native code] }
contractID:null
classDescription:null
classID:null
implementationLanguage:2
flags:8
SINGLETON:1
THREADSAFE:2
MAIN_THREAD_ONLY:4
DOM_OBJECT:8
PLUGIN_OBJECT:16
CONTENT_NODE:64
RESERVED:2147483648
B) errorCallback 定位失败时执行的回调函数 eg: function(error){alert(error.message);}
errorCallback返回一个错误数据对象error作为参数,该对象有属性:
1.code :表示失败原因,返回1 or 2 or 3 ,具体为
PERMISSION_DENIED (数值为1) 表示没有权限使用地理定位API
POSITION_UNAVAILABLE (数值为2) 表示无法确定设备的位置,例如一个或多个的用于定位采集程序报告了一个内部错误导致了全部过程的失败
TIMEOUT (数值为3) 表示超时
详情查看 http://dev.w3.org/geo/api/spec-source.html#permission_denied_error
2.message :错误提示内容
C) positionOptions
用来设置positionOptions来更精细的执行定位,positionOptions拥有三个属性
{enableHighAccuracy:boolean , timeout:long , maximumAge:long}。
enableHighAccuracy 【true or false(默认)】是否返回更详细更准确的结构,默认为false不启用,选择true则启用,但是会导致较长的响应时间及增加功耗,这种情况更多的用在移动设备上。
timeout
设备位置获取操作的超时时间设定(不包括获取用户权限时间),单位为毫秒,如果在设定的timeout时间内未能获取位置定位,则会执行
errorCallback()返回code(3)。如果未设定timeout,那么timeout默认为无穷大,如果timeout为负数,则默认
timeout为0。
maximumAge
设定位置缓存时间,以毫秒为单位,如果不设置该值,该值默认为0,如果设定负数,则默认为0。该值为0时,位置定位时会重新获取一个新的位置对象;该值大
于0时,即从上一次获取位置时开始,缓存位置对象,如果再次获取位置时间不超过maximumAge,则返回缓存中的位置,如果超出
maximumAge,则重新获取一个新的位置。
watchPosition()
功能getCurrentPosition()相似,watchPosition()是定期轮询设备的位置,同样拥有3个参数,与getCurrentPosition()相同。
使用方法:navigator.geolocation.watchPosition(successCallback, [errorCallback] , [positionOptions]);
执行步骤:
1.首先初始化positionOptions内的属性(详细同上)。
2.判断是否有缓存位置对象,该对象年龄是否可用、是否超出maximumAge ,如果可用且未超出,返回缓存位置,否则重新确定设备位置。
3.位置定位操作:
i.建立一个计时器,进行位置获取操作,如果在timeout之前完成,执行下一步;如果未在timeout之前完成,则执行errorCallback(),code为3,跳出步骤做等待重新激活。
ii.如果在timeout之前获得位置成功,则执行successCallback(),然后重置计时器(从获取位置成功时刻重新算起),继
续挂起获取新位置。当有与之前位置有明显不同位置出现时,再次执行successCallback(),并重复操作,该循环直到timeout超时或者获
取操作中遇到POSITION_UNAVAILABLE错误执行errorCallback()为止,亦或者执行clearWatch()操作。
clearWatch()
配合watchPosition()使用,用于停止watchPosition()轮询。
watchPosition()需要定义一个watchID,var watchID = watchPosition(...),通过clearWatch(watchID)来停止watchPosition(),使用方法类似setInterval。
js地理定位对象 navigator.geolocation的更多相关文章
- JS新API标准 地理定位(navigator.geolocation)/////////zzzzzzzzzzz
在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...
- JS新API标准 地理定位(navigator.geolocation)
在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...
- HTML5地理定位,百度地图API,知识点熟悉
推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位 if (navigator.geolocation) { alert('支持地理定位'); } e ...
- HTML5 学习06——Geolocation(地理定位)
HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. HTML ...
- HTML5: HTML5 Geolocation(地理定位)
ylbtech-HTML5: HTML5 Geolocation(地理定位) 1.返回顶部 1. HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位 ...
- 基于浏览器的HTML5地理定位
基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...
- 第182天:HTML5——地理定位
HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支 ...
- js 获取定位信息
1.百度账号 申请一个key http://developer.baidu.com/map/index.php?title=lbscloud 2.开发下面demo代码 <!DOCTYPE htm ...
- js定位navigator.geolocation
一.简介 html5为window.navigator提供了geolocation属性,用于获取基于浏览器的当前用户地理位置. window.navigator.geolocation提供了3个方法分 ...
随机推荐
- thinkphp5的钩子怎么用
1.创建钩子行为 我们自己定义的标签位可以直接放在Think\Behaviors中,也可以放在应用目录中,比如说Home模块下,新建一个Behaviors的文件夹,在文件夹内新建: 标签名+Behav ...
- 由一个问题引起的思考:WEB开发中,使用JSON-RPC好,还是RESTful API好?
起因: 研究zabbix的API设计风格.查看zabbix官网API文档,可以看到使用的是json-rpc:2.0 随后搜索到知乎上的一个问题讨论:https://www.zhihu.com/ques ...
- DDR3(5):读写仲裁
上一讲我们完成了读的控制,但是并不知道是否设计成功,必须读写结合才行.DDR3 的 app 端的命令总线是读写复用的,因此可能会存在读写冲突的时刻,为了解决此问题,必须进行分时读写,也就是我们说的仲裁 ...
- 微信小程序:防止多次点击跳转(函数节流)
场景 在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次): 解决办法 然后从 轻松理解JS函数 ...
- 解决:ElasticSearch ClusterBlockException[blocked by: [FORBIDDEN/12/index read-only / allow delete (api)];
简记 使用SkyWalking用ES做存储,发现运行一段时间会提示ElasticSearch ClusterBlockException[blocked by: [FORBIDDEN/12/index ...
- Docker-Compose通过文件声明默认的环境变量
写文目的 在写本文之前,我在做一个docker-compose项目,这里需要在docker-compose.yml配置中引用到宿主机的ip,然而docker-compose并没有命令行一个输入的选项, ...
- Django中使用CORS实现跨域请求(转)
原文:https://blog.csdn.net/zizle_lin/article/details/81381322 跨域请求: 请求url包含协议.网址.端口,任何一种不同都是跨域请求. ...
- 封装:简要介绍自定义开发基于WPF的MVC框架
原文:封装:简要介绍自定义开发基于WPF的MVC框架 一.目的:在使用Asp.net Core时,深感MVC框架作为页面跳转数据处理的方便,但WPF中似乎没有现成的MVC框架,由此自定义开发一套MVC ...
- 突破Java面试-Redis集群模式的原理
1 面试题 Redis集群模式的工作原理说一下?在集群模式下,key是如何寻址的?寻址都有哪些算法?了解一致性hash吗? 2 考点分析 Redis不断在发展-Redis cluster集群模式,可以 ...
- 【Kafka】Exactly Once语义与事务
Kafka在0.11.0.0之前的版本中只支持At Least Once和At Most Once语义,尚不支持Exactly Once语义. 但是在很多要求严格的场景下,如使用Kafka处理交易数据 ...