📜  HTML5-地理位置

📅  最后修改于: 2020-10-23 06:19:01             🧑  作者: Mango


HTML5 Geolocation API使您可以与自己喜欢的网站共享位置。 JavaScript可以捕获您的经度和纬度,并且可以发送到后端Web服务器,并执行精美的位置感知操作,例如查找本地商家或在地图上显示您的位置。

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

var geolocation = navigator.geolocation;

地理位置对象是一个服务对象,它允许小部件检索有关设备地理位置的信息。

地理位置方法

地理位置对象提供以下方法-

Sr.No. Method & Description
1 getCurrentPosition()

This method retrieves the current geographic location of the user.

2 watchPosition()

This method retrieves periodic updates about the current geographic location of the device.

3 clearWatch()

This method cancels an ongoing watchPosition call.

以下是使用上述任何方法的示例代码-

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

这里的showLocation和errorHandler是回调方法,将用于获取实际位置(如下一节所述)并处理错误(如果有)。

位置属性

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

Position对象指定设备的当前地理位置。该位置表示为一组地理坐标以及有关航向和速度的信息。

下表描述了Position对象的属性。对于系统无法提供值的可选属性,该属性的值设置为null。

Property Type Description
coords objects Specifies the geographic location of the device. The location is expressed as a set of geographic coordinates together with information about heading and speed.
coords.latitude Number Specifies the latitude estimate in decimal degrees. The value range is [-90.00, +90.00].
coords.longitude Number Specifies the longitude estimate in decimal degrees. The value range is [-180.00, +180.00].
coords.altitude Number [Optional] Specifies the altitude estimate in meters above the WGS 84 ellipsoid.
coords.accuracy Number [Optional] Specifies the accuracy of the latitude and longitude estimates in meters.
coords.altitudeAccuracy Number [Optional] Specifies the accuracy of the altitude estimate in meters.
coords.heading Number [Optional] Specifies the device’s current direction of movement in degrees counting clockwise relative to true north.
coords.speed Number [Optional] Specifies the device’s current ground speed in meters per second.
timestamp date Specifies the time when the location information was retrieved and the Position object created.

以下是使用Position对象的示例代码。这里的showLocation方法是一个回调方法-

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

处理错误

地理位置很复杂,非常需要捕获任何错误并妥善处理。

地理位置方法getCurrentPosition()和watchPosition()利用提供了PositionError对象的错误处理程序回调方法。该对象具有以下两个属性-

Property Type Description
code Number Contains a numeric code for the error.
message String Contains a human-readable description of the error.

下表描述了PositionError对象中返回的可能的错误代码。

Code Constant Description
0 UNKNOWN_ERROR The method failed to retrieve the location of the device due to an unknown error.
1 PERMISSION_DENIED The method failed to retrieve the location of the device because the application does not have permission to use the Location Service.
2 POSITION_UNAVAILABLE The location of the device could not be determined.
3 TIMEOUT The method was unable to retrieve the location information within the specified maximum timeout interval.

以下是使用PositionError对象的示例代码。这里errorHandler方法是一个回调方法-

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

头寸选项

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

getCurrentPosition(callback, ErrorCallback, options)

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

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

Property Type Description
enableHighAccuracy Boolean Specifies whether the widget wants to receive the most accurate location estimate possible. By default this is false.
timeout Number The timeout property is the number of milliseconds your web application is willing to wait for a position.
maximumAge Number Specifies the expiry time in milliseconds for cached location information.

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

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