html5

关注公众号 jb51net

关闭
网页制作 > html5 >

HTML5的Geolocation地理位置定位API使用教程

liuhe688

在手持设备如此普遍的今天,位置信息对于应用程序来讲是极其重要的,打车应用可以根据用户的位置信息呼叫附近的车辆,团购软件可以根据当前的位置推荐附近的影院和美食,地图应用可以根据用户的位置快速规划到目的地的路线,可以说位置信息对于移动应用是不可或缺的。
为了顺应这个潮流,HTML5为我们提供了Geolocation库,有了它我们就能够在Web应用中轻而易举地实现上述这些功能。那么今天我就为大家介绍一下这个库的使用。

基本用法 
首先,我们可以从浏览器的对象中通过geolocation属性获取到一个Geolocation的实例,如下图所示:
2016512112246957.jpg (856×560)

图中我们可以看到,Geolocation类有三个常用的方法,他们分别是:

1.getCurrentPosition: 用于获取当前的位置信息
2.watchPosition: 用于在位置变化时实时监测位置信息
3.clearWatch: 取消正在运行的监测操作
我们先来看一下getCurrentPosition方法,下面是它的函数签名:

一旦这段代码运行起来,浏览器窗口就会弹出一个确认框,请求用户进行位置定位的授权:
2016512112330667.jpg (848×464)

如果我们点击Allow允许该站点进行位置定位,该函数就开始从设备获取位置信息,并触发成功的回调函数,并将位置信息对象传入回调函数中,上面的代码中我们在控制台打印了position,控制台信息如下:
2016512112354420.png (914×502)

可以看到,position实际上是一个Geoposition对象的实例,其中包括coords和timestamp两个属性,后者是一个时间戳,记录获取到位置时的时间,coords里面包含了很多位置有关的信息:

accuracy: 位置的精确度范围,单位为米
altitude: 海拔高度,单位为米,如果设备不支持高度感应,则该属性为null
altitudeAccuracy: 海拔精确度范围,单位为米,如果设备不支持高度感应,则该属性为null
speed: 设备移动的速度,单位为米/秒,如果设备不能提供速度信息,该属性为null
heading: 当前移动的方向,以数字表示,单位为角度,以顺时针[0, 360)度表示偏离正北方的角度,0表示正北方向,90度表示正东方向,180度表示正南方向,270表示正西方向;需要注意的是,如果speed为0,则heading会是NaN,如果设备不能提供方向信息,则该属性为null
longitude: 经度信息
latitude: 纬度信息
我们在成功的回调函数中接收到这些信息,可以根据实际的设备和应用场景获取相应的信息,做进一步的操作。
回到刚才的确认框,如果我们点击了Block阻止该站点获取当前的位置信息,代码就会授权失败,相应地,失败的回调函数就会被触发,error错误对象也会被传入回调函数,我们的打印信息如下:
2016512112616703.jpg (924×256)

可以看到error参数是一个PositionError实例,包含一个错误码code和message,分别表示错误的类型和错误提示消息,其中错误码有以下几种:

 其中timeout是设定地理位置获取的超时时间(单位为毫秒,用户选择允许的时间不计算在内);而maximumAge表示允许设备从缓存中读取位置,缓存的过期时间,单位是毫秒,设为0来禁用缓存读取。如果返回的是缓存中的时间,会在timestamp中反映出来。