HTML5 - 地理定位

HTML5 Geolocation API可以捕获您的经度和纬度，并且可以发送到后端Web服务器，并执行精确的位置感知函数，如查找本地商家或在Map上显示您的位置。

今天，大多数浏览器和移动设备都支持Geolocation API，地理位置API使用全局导航器对象的新属性，可以按以下方式创建的地理位置对象-

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
   }
   ...
}

位置选项

以下是getCurrentPosition方法的实际语法-

getCurrentPosition(callback, ErrorCallback, options)

这里的第三个参数是 PositionOptions 对象，该对象指定一组用于检索设备地理位置的选项。

以下是可以指定为第三个参数的选项-

以下是示例代码，显示了如何使用上述方法-

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