📅  最后修改于: 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});
}