081_html5地理定位

最新推荐文章于 2025-07-27 10:59:49 发布

原创最新推荐文章于 2025-07-27 10:59:49 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #web前端

html学习专栏收录该内容

89 篇文章

订阅专栏

本文介绍HTML5 Geolocation API，用于获取用户的地理位置，并提供浏览器支持情况。文中包含如何使用getCurrentPosition()方法获取位置信息的示例代码，以及如何处理错误和拒绝的情况。

1. html5 Geolocation(地理定位)用于定位用户的位置。

2. 定位用户的位置

2.1. html5 Geolocation API用于获得用户的地理位置。

2.2. 鉴于该特性可能侵犯用户的隐私, 除非用户同意, 否则用户位置信息是不可用的。

3. 浏览器支持

3.1. Internet Explorer 9+、Firefox、Chrome、Safari支持地理定位。

3.2. 对于拥有GPS的设备, 比如: iPhone, 地理定位更加精确。

4. html5使用地理定位

4.1. 请使用getCurrentPosition()方法来获得用户的位置。

4.2. 下例是一个简单的地理定位实例, 可返回用户位置的经度和纬度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>获取位置坐标</title>
	</head>
	<body>
		<p id="demo">点击这个按钮, 获得您的坐标:</p>
		<button onclick="getLocation()">试一下</button>
		
		<script type="text/javascript">
			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>

4.3. 例子解释:

4.3.1. 检测是否支持地理定位。

4.3.2. 如果支持, 则运行getCurrentPosition()方法。如果不支持, 则向用户显示一段消息。

4.3.3. 如果getCurrentPosition()运行成功, 则向参数showPosition中规定的函数返回一个coordinates对象。

4.3.4. showPosition()函数获得并显示经度和纬度。

5. 处理错误和拒绝

5.1. getCurrentPosition()方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>获取位置坐标或错误</title>
	</head>
	<body>
		<p id="demo">点击这个按钮, 获得您的坐标:</p>
		<button onclick="getLocation()">试一下</button>

		<script type="text/javascript">
			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>

5.2. 错误代码:

5.2.1. Permission denied: 用户不允许地理定位。

5.2.2. Position unavailable: 无法获取当前位置。

5.2.3. Timeout: 操作超时。

6. getCurrentPosition()方法: 返回数据

6.1. 若成功, 则getCurrentPosition()方法返回对象。始终会返回latitude、longitude以及accuracy属性。如果可用, 则会返回其他下面的属性。

7. Geolocation对象, 其他方法

7.1. watchPosition(): 返回用户的当前位置, 并继续返回用户移动时的更新位置(就像汽车上的GPS)。

7.2. clearWatch(): 停止watchPosition()方法。

7.3. 下面的例子展示watchPosition()方法。您需要一台精确的GPS设备来测试该例(比如: iPhone):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>获取位置坐标</title>
	</head>
	<body>
		<p id="demo">点击这个按钮, 获得您的坐标:</p>
		<button onclick="getLocation()">试一下</button>

		<script type="text/javascript">
			var x=document.getElementById("demo");
			function getLocation() {
				if(navigator.geolocation) {
				    navigator.geolocation.watchPosition(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>