HTML5 GeoLocation API(地理定位API)可以获取用户所在的地理位置。由于安全的原因,在使用HTML5 GeoLocation的时候,会弹出对话框让用户决定是否共享他们所在的位置,只有在用户同意的情况下,应用程序才可以获取用户的所在位置。
HTML5 GeoLocation的应用场景非常多。例如可以为用户提供他们所在地区的商品打折信息,你可以请求用户共享他们的地理位置,如果他们同意,应用程序就可以向他们提供该地区的相关产品的打折信息。
HTML5 GeoLocation的另一个应用场景是构建计算行走路程的应用程序。在用户跑步开始的时候,他可以通过手机浏览器打开应用程序,启动记录功能。在用户移动的过程中,应用程序会记录用户经过的距离,还可以把跑步对应的坐标显示在地图上,甚至可以显示海拔位置。
还有一种HTML5 GeoLocation的应用场景是基于GPS导航的社交网络应用。通过它可以看到好友的所在位置。
访问地理位置
我们可以使用浏览器的navigator.geolocation
对象通过javascript来访问地理位置。地理位置对象允许我们使用两个函数来访问地理位置:
getCurrentPosition()
watchPosition()
getCurrentPosition()
函数以快照的方式返回访问者的所在位置。watchPosition()
返回访问者每一次位置发生改变之后的新位置。这两个函数都有下面的3个参数:
- 成功时的回调函数
- 失败时的回调函数(可选)
- Geo location参数对象(可选)
下面是一个例子,它可以获取用户的所在位置,在getCurrentPosition()
方法的参数中只传入了成功时的回调函数。
navigator.geolocation.getCurrentPosition( function(position) { alert("your position is: " + position.coords.latitude + ", " + position.coords.longitude); } );
要体验一下上面代码的效果,请点击这个按钮:
地理位置信息是异步获取的。这意味着你在调用getCurrentPosition()
或watchPosition()
函数时会立即返回。当浏览器发出获取用户的地理位置请求,并且用户同意了浏览器获取器地理位置,成功回调函数被调用。如果有错误发生,将会调用错误回调函数。
位置定位对象
定位对象传入的成功回调函数类似下面的样子:
double latitude // 只读属性 double longitude // 只读属性 double accuracy // 只读属性 double altitude // 只读属性 double altitudeAccuracy // 只读属性 double heading // 只读属性 double speed // 只读属性
latitude
和longitude
包含位置的地理坐标。accuracy
包含精确到米的位置信息。精度越低,定位越精确。
altitude
,altitudeAccuracy
,heading
和speed
属性只有在设备浏览器中嵌入有GPS时才有效。没有的话,这些参数都可以设置为null
。
altitude
属性包含用户的地理位置的海拔高度信息。altitudeAccuracy
属性包含精确到米的海拔高度。heading
属性用于指明用户移动的方向。它的值是相对于正北的度数(degrees),范围0-360。speed
属性包含用户的运动速度,以每秒多少米计算。
错误回调函数
如果获取用户的地理位置失败,传入到getCurrentPosition()
或watchPosition()
函数中的错误回调函数就会被调用。获取用户地理位置失败的原因可能有下面的几种:
- 用户拒绝浏览器访问他的地理位置。
- 设备浏览器无法获取地理位置。例如:运行浏览器的设置在一个隧道中,或在地底下等等,哪里无法接收到GPS卫星的信号。
- 设备获取地理位置超时。
错误回调函数接收一个带两个参数的对象:
short code // 无符号只读属性 DOMString message // 只读属性
code
属性的值有下面3种可能的取值:
- 1,表示
PERMISSION_DENIED
- 2,表示
POSSITION_UNAVAILABLE
- 3,表示
TIMEOUT
message
属性包含错误信息的描述文本。这些错误信息对于开发者来说是有用的,但是它们不应该对浏览者开放。
地理位置选项对象
getCurrentPosition()
和watchPosition()
函数可以传入一个带3个属性参数的地理位置选项对象。选项对象可以包含下面的3个属性:
enableHighAccuracy // true 或 false timeout // 毫秒 maximumAge // 毫秒
enableHighAccuracy
属性可以设置为true
或false
。设置为true
时,如果设备浏览器中有GPS,它将被启用。需要注意的是,GPS是十分耗电的,所以除非在需要的时候,否则不要打开它。
timeout
属性指定在获取地理位置的时候,等待多长时间可以定义为超时。超时时会调用错误回调函数。
maximumAge
属性指定浏览器缓存一个地理位置多长时间。将它设置为0时,在每次调用成功回调函数时都会获取新的地理位置。
一个完整的HTML5地理定位的例子
下面是一个完整的获取地理位置的例子,包含成功回调函数和失败回调函数,以及一个选项对象:
navigator.geolocation.getCurrentPosition( function(position) { alert("your position is: " + position.coords.latitude + ", " + position.coords.longitude); } , function(errorObject) { alert("Error obtaining position"); } , { enableHighAccuracy : true, timeout : 3000, maximumAge : 60000 } );