js地理定位对象 navigator.geolocation

摘要:
如果未设定timeout,那么timeout默认为无穷大,如果timeout为负数,则默认timeout为0。watchPosition()功能getCurrentPosition()相似,watchPosition()是定期轮询设备的位置,同样拥有3个参数,与getCurrentPosition()相同。使用方法:navigator.geolocation.watchPosition;执行步骤:1.首先初始化positionOptions内的属性。当有与之前位置有明显不同位置出现时,再次执行successCallback(),并重复操作,该循环直到timeout超时或者获取操作中遇到POSITION_UNAVAILABLE错误执行errorCallback()为止,亦或者执行clearWatch()操作。clearWatch()配合watchPosition()使用,用于停止watchPosition()轮询。

浏览器信息的存储对象(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,具体如下:

QueryInterface:function QueryInterface() { [native code] }
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》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【cocos2d-js官方文档】十五、cc.sysjs 和后台交互下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

js中DOMContentLoaded和load的区别

如题;DOMContentLoaded和load都是页面加载的时候触发的事件。区别在于触发的时机不一样。 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构。 2.加载外部脚本和css文件。 3.解析并执行脚本代码。 4.DOM树构建完成。(此时会触发DOMContentLoaded事件) 5.加载外部图片等文件。 6.页面加载完毕。(此时会触发l...

总结前端面试过程中最容易出现的问题

前言 之前在兴安得力的时候,我也出过前端的面试题。那么前端人员在外面面试的时候,一般技术人员都会考察我们那些地方呢?我在这里不妨总结一下!(PS:有点小邪恶,这个公开之后,对于面试者来说是方便了。但是,假如你是公司技术人员,是面试官,您不妨修改一下题目,变通一下!) javascript常见题目 一、您对js的原型是如何理解的?您对js的继承是如何理解的?...

JS原生请求的方法XHR对象

XMLHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信。 最早,微软在IE 5引进了这个接口。因为它太有用,其他浏览器也模仿部署了,ajax操作因此得以诞生。 但是,这个接口一直没有标准化,每家浏览器的实现或多或少有点不同。HTML 5的概念形成后,W3C开始考虑标准化这个接口。2008年2月,就提出了XMLHtt...

jQuery(一)

一、什么是 jQuery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率。 js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可。 关于jQuery的相关资料: 官网:http://jquery.com/ 官网API文档:http://api.jquery.com/ 汉化API...

js实现弹窗居中

在一些页面中,我们总会遇到一些弹窗不居中的时候,还要根据浏览器的大小来调整弹窗的弹出位置, 之前我也遇到这样的问题,现在我把我知道的呈现给大家 css样式  .windowBox{    500px; } .mid-tanBox{    position: fixed;  top: 50%;  left: 50%;    margin-left: -250...

浏览器、HTML、css 面试题

1.什么是盒模型 盒模型(内容(content),内边距(padding),边框(border),外边距(margin)),值得注意的是,块级元素可以设置宽高,内边距,边框,外边距 行内元素宽高自动,并排显示。 2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素和块级元素有什么区别? CSS规范规定,每个元素都有display属性,确...