HTML - Geolocation API_HTML 菜鸟教程

Web 应用程序用于访问用户地理位置的 HTML geolocation API。大多数现代浏览器和移动设备都支持地理位置 API。

JavaScript 可以捕获您的纬度和经度，并可以发送到后端 Web 服务器并执行花哨的位置感知操作，例如查找本地企业或在地图上显示您的位置。

语法


var geolocation = navigator.geolocation;

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

地理定位方法

geolocation 对象提供以下方法：

方法	描述
getCurrentPosition（）	此方法检索用户的当前地理位置。
watchPosition（）	此方法检索有关设备当前地理位置的定期更新。
clearWatch（）	此方法取消正在进行的 watchPosition 调用。

以下是使用上述任一方法的示例代码：


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

	 watchId = geolocation.watchPosition(showLocation, errorHandler, {
			enableHighAccuracy: true,
			timeout: 5000,
			maximumAge: 0
	});

	navigator.geolocation.clearWatch(watchId);
}

这里 showLocation 和 errorHandler 是回调方法，它们将用于获取实际位置，如下一节所述，并处理错误（如果有错误）。

位置属性

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

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

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

属性	类型	描述
coords	对象	指定设备的地理位置。该位置表示为一组地理坐标以及有关航向和速度的信息。
coords.latitude	数值	指定以十进制度为单位的纬度估计值。取值范围为 [-90.00， +90.00]。
coords.longitude	数值	以十进制度为单位指定经度估计值。取值范围为 [-180.00， +180.00]。
coords.altitude	数值	[可选]指定 WGS 84 椭球体上方的高度估计值（以米为单位）。
coords.accuracy	数值	[可选]指定纬度和经度估计值的精度（以米为单位）。
coords.altitudeAccuracy	数值	[可选]指定高度估计值的精度（以米为单位）。
coords.heading	数值	[可选]指定设备的当前移动方向，以相对于真北顺时针计数的度数为单位。
coords.speed	数值	[可选]指定设备的当前地面速度（以米/秒为单位）。
timestamp	日期	指定检索位置信息和创建 Position 对象的时间。

下面是一个使用 position 对象的示例代码。这里 showLocation 方法是一个回调方法：


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

处理错误

地理位置很复杂，非常需要捕获任何错误并优雅地处理它。

地理位置方法 getCurrentPosition（） 和 watchPosition（） 使用错误处理程序回调方法，该方法提供 PositionError 对象。此对象具有以下两个属性：

属性	类型	描述
code	数值	包含错误的数字代码。
message	字符串	包含人类可读的错误说明。

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

代码	常量	描述
0	UNKNOWN_ERROR	由于未知错误，该方法无法检索设备的位置。
1	PERMISSION_DENIED	该方法无法检索设备的位置，因为应用程序没有使用定位服务的权限。
2	POSITION_UNAVAILABLE	无法确定设备的位置。
3	TIMEOUT	该方法无法在指定的最大超时间隔内检索位置信息。

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


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

仓位选项

以下是 getCurrentPosition（）方法的实际语法：


 getCurrentPosition(callback, ErrorCallback, options)

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

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

属性	类型	描述
enableHighAccuracy	布尔值	指定小组件是否希望接收尽可能准确的位置估计值。默认情况下，这是 false。
timeout	数值	timeout 属性是 Web 应用程序愿意等待位置的毫秒数。
maximumAge	数值	指定缓存位置信息的到期时间（以毫秒为单位）。

下面是一个示例代码，演示如何使用上述方法：


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

HTML geolocation API 示例

以下是一些示例，展示了如何在 HTML 中访问地理位置。

获取当前位置

以下代码演示如何使用 JavaScript 和 HTML 访问设备的当前位置。


<!DOCTYPE html>
<html>
<head>
			<title>
				 Geolocation API Example
			</title>
</head>
<body>

	 <h2>Geolocation API Example</h2>
	 <p id="demo">
			Click the button to get your coordinates:
	 </p>
	 <button onclick="getLocation()">
			Show Location
	 </button>

	 <script>
			var x = document.getElementById("demo");

			function getLocation() {
				 if (navigator.geolocation) {
						navigator.geolocation.getCurrentPosition(showPosition);
				 } else {
						x.innerHTML = 
						"Geolocation is not supported by this browser.";
				 }
			}

			function showPosition(position) {
				 x.innerHTML = "Latitude: " + position.coords.latitude + 
				 "<br>Longitude: " + position.coords.longitude;
			}
				 
	 </script>

</body>
</html>

geolocation 中的错误处理

以下代码演示了如何在从用户访问位置时处理潜在错误。


<!DOCTYPE html>
<html>
<head>
			<title>Geolocation API Example</title>
</head>

<body>
	 <h2>Geolocation API Example</h2>
	 <p id="demo">
			Turn off location service of your device, 
			See how the error is handled.
	 </p>
	 <button onclick="getLocation()">
			Show Location
	 </button>

	 <script>
			var x = document.getElementById("demo");

			function getLocation() {
				 if (navigator.geolocation) {
						navigator.geolocation.getCurrentPosition(showPosition, showError);
				 } else {
						x.innerHTML = "Geolocation is not supported by this browser.";
				 }
			}

			function showPosition(position) {
				 x.innerHTML = "Latitude: " + position.coords.latitude + 
				 "<br>Longitude: " + position.coords.longitude;
			}

			function showError(error) {
				 switch(error.code) {
						case error.PERMISSION_DENIED:
									x.innerHTML = 
									"User denied the request for Geolocation.";
									break;
						case error.POSITION_UNAVAILABLE:
									x.innerHTML = 
									"Location information is unavailable.";
									break;
						case error.TIMEOUT:
									x.innerHTML = 
									"The request to get user location timed out.";
									break;
						case error.UNKNOWN_ERROR:
									x.innerHTML = 
									"An unknown error occurred.";
									break;
				 }
			}
	 </script>

</body>
</html>

支持的浏览器

应用程序接口
geolocation	yes	9.0	3.5	5.0	16.0

<< HTML - 画布 canvas 元素 HTML - 拖放 API >>