离线下载
PDF版 ePub版

极客学院团队出品 · 更新于 2018-11-28 11:00:42

HTML5 地理定位

HTML5 Geolocation API 允许我们对喜欢的网站共享我们的位置。JavaScript 可以捕获到纬度和经度,还可以发送给后端服务器,然后做一些位置感知的事情,比如查找本地企业或者在地图上显示我们的位置。

当前大多数浏览器和移动设备都支持 Geolocation API。地理定位 APIs 是作为全局 navigator 对象的一个新属性工作的。可以按照如下方式创建地理定位对象:

var geolocation = navigator.geolocation;

地理对象是一个允许组件检索设备地理位置相关信息的服务对象。

Geolocation 方法

地理定位对象提供了下列方法:

方法 描述
getCurrentPosition()

这个方法用于检索用户的当前地理位置。

watchPosition()

这个方法用于检索设备当前地理位置定期更新信息。

clearWatch()

这个方法用于取消 watchPosition 方法调用。

示例

下面是一个使用上述方法的示例代码:

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}

这里的 showLocation 和 errorHandler 分别是用来下一节会讲述的获取实际位置和处理错误的回调方法。

Location 属性

地理定位方法 getCurrentPosition() 和 getPositionUsingMethodName() 指定了检索位置信息的回调方法。这些方法使用一个存储完整位置信息的 Position 对象异步调用。

这个 Position 对象指定了设备的当前地理位置。这个位置以一组带有方向和速度信息的地理坐标表示。

下面的表格描述了 Position 对象的属性。对于可选属性,如果系统没有提供值,则该属性值为 null。

属性 类型 描述
coords objects

表示设备的地理位置。位置以一组带有方向和速度信息的地理坐标表示。

coords.latitude Number

十进制的纬度估值。值范围为 [-90.00, +90.00]。

coords.longitude Number

十进制的经度固执。值范围为 [-180.00, +180.00]。

coords.altitude Number

【可选】 WGS-84 球面以上的海拔高度固执,以米为单位计算。

coords.accuracy Number

【可选】 以米为单位的纬度和经度精确估值。

coords.altitudeAccuracy Number

【可选】 以米为单位的海拔高度精确估值。

coords.heading Number

【可选】 相对正北方向设备以顺时针方向运动计算的当前方向。

coords.speed Number

【可选】 以米/每秒为单位的设备当前地面速度。

timestamp date

检索位置信息和创建 Position 对象的日期时间。

示例

下面是一个使用 Position 对象的示例代码。其中 showLocation 方法是一个回调方法:

function showLocation( position ) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  ...
}

处理错误

地理定位是复杂的。非常需要我们捕获任意错误并优雅的处理它。

地理定位方法 getCurrentPosition() 和 watchPosition() 可以使用一个提供 PositionError 对象的错误处理回调方法。这个对象有下列两属性。

属性 类型 描述
code Number

错误码。

message String

错误描述信息。

下面这个表格描述了 PositionError 对象可能返回的错误码。

错误码 常量 描述
0 UNKNOWN_ERROR

由于未知错误,检索设备位置信息失败。

1 PERMISSION_DENIED

由于应用程序没有权限使用位置服务,检索设备位置信息失败。

2 POSITION_UNAVAILABLE

设备位置信息无法确定。

3 TIMEOUT

不能在给定的最大超时区间内检索位置信息。

示例

下面是一个使用 PositionError 对象的示例代码。其中 errorHandler 方法是一个回调方法:

function errorHandler( err ) {
  if (err.code == 1) {
    // access is denied
  }
  ...
}

Position 选项

下面是 getCurrentPosition() 方法的实际语法:

getCurrentPosition(callback, ErrorCallback, options)

其中第三个参数是指定一组检索设备地理位置选项的 PositionOptions 对象。

下列选项可以指定为第三个参数:

属性 类型 描述
enableHighAccuracy Boolean

是否想要检索最精准的位置估值。默认值为 false。

timeout Number

timeout 属性就是 Web 应用程序要等待定位的毫秒数。

maximumAge Number

用于缓存位置信息的过期时间毫秒数。

示例

下面这个示例代码展示了如何使用上面提到的方法:

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
}
上一篇: HTML5 音频和视频 下一篇: HTML5 Microdata