HTML5 地理定位

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

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

var geolocation = navigator.geolocation;

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

Geolocation 方法

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

示例

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

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

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

Location 属性

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

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

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

示例

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

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

处理错误

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

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

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

示例

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

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

Position 选项

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

getCurrentPosition(callback, ErrorCallback, options)

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

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

示例

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

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