当前位置主页 > 资料库 > 前端教程 > HTML5教程 | HTML5地理定位(GeoLocation API)

HTML5教程 | HTML5地理定位(GeoLocation API)

2015-08-19

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            // 只读属性                              
                            

latitudelongitude包含位置的地理坐标。accuracy包含精确到米的位置信息。精度越低,定位越精确。

altitudealtitudeAccuracyheadingspeed属性只有在设备浏览器中嵌入有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属性可以设置为truefalse。设置为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
    }
);                              
                            
返回HTML5教程目录
Previous:
上一篇:HTML5教程 | HTML5数据存储
Next:
下一篇:HTML5教程 | HTML5信息API(Messaging API)
返回顶部