地理定位

最新推荐文章于 2021-06-16 08:32:01 发布

冰灵

最新推荐文章于 2021-06-16 08:32:01 发布

阅读量626

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 JS 文章标签： JavaScript HTML5

本文链接：https://blog.youkuaiyun.com/bud_icelf/article/details/8836228

JS 同时被 2 个专栏收录

15 篇文章

订阅专栏

HTML5

13 篇文章

订阅专栏

个人原创,欢迎转载,转载请注明出处http://blog.youkuaiyun.com/bud_icelf QQ:909648986

地理定位

HTML5 Geolocation

Geolocation(地理定位) API 用于获得用户的地理位置。

例子1 获取用户位置

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="gbk">
</head>
<body>
	<div id="showInfoDiv"></div>
	<button onclick="showInfo()">获取位置</button>
	<script type="text/javascript">
	var showInfoDiv=document.getElementById("showInfoDiv");
		function showInfo(){
			if(navigator.geolocation){
				navigator.geolocation.getCurrentPosition(showPosition);
			}else{
				showInfoDiv.innerHTML="你的浏览器不支持定位";
			}
		}
		function showPosition(position){
			var str="";
			str+="纬度:"+position.coords.latitude+"\n";
			str+="经度:"+position.coords.longitude;
			showInfoDiv.innerHTML=str;
		}
	</script>
</body>
</html>

效果显示

<div id="showInfoDiv"></div>
添加一个div,用于显示位置信息

if(navigator.geolocation)
检测是否支持地理定位

navigator.geolocation.getCurrentPosition(showPosition);
调用getCurrentPosition()方法,向showPosition函数传入一个coordinates对象,用于显示位置信息.

position.coords.latitude
返回十进制数的纬度

position.coords.longitude
返回十进制数的经度

例子2 使用静态地图显示用户位置

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="gbk">
</head>
<body>
	<div id="showInfoDiv"></div>
	<button onclick="showInfo()">获取位置</button>
	<script type="text/javascript">
	var showInfoDiv=document.getElementById("showInfoDiv");
		function showInfo(){
			if(navigator.geolocation){
				navigator.geolocation.getCurrentPosition(showPosition);
			}else{
				showInfoDiv.innerHTML="你的浏览器不支持定位";
			}
		}
		function showPosition(position){
			var latitude=position.coords.latitude;
			var longitude=position.coords.longitude;
			var location=latitude+","+longitude;
			var map="http://maps.googleapis.com/maps/api/staticmap?center="+location+"&zoom=15&size=500x300&sensor=false";
			showInfoDiv.innerHTML="<img src='"+map+"'/>";
		}
	</script>
</body>
</html>

效果显示

例子3 动态获取用户位置

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="gbk">
</head>
<body>
	<div id="showInfoDiv"></div>
	<button onclick="showInfo()">获取位置</button>
	<script type="text/javascript">
	var showInfoDiv=document.getElementById("showInfoDiv");
		function showInfo(){
			if(navigator.geolocation){
				navigator.geolocation.watchPosition(showPosition);
			}else{
				showInfoDiv.innerHTML="你的浏览器不支持定位";
			}
		}
		function showPosition(position){
			var str="";
			str+="纬度:"+position.coords.latitude+"\n";
			str+="经度:"+position.coords.longitude;
			showInfoDiv.innerHTML=str;
		}
	</script>
</body>
</html>

效果显示

navigator.geolocation.watchPosition(showPosition);
动态更新用户地理位置

例子4 显示错误信息

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="gbk">
</head>
<body>
	<div id="showInfoDiv"></div>
	<button onclick="showInfo()">获取位置</button>
	<script type="text/javascript">
	var showInfoDiv=document.getElementById("showInfoDiv");
		function showInfo(){
			if(navigator.geolocation){
				navigator.geolocation.getCurrentPosition(showPosition,showError);
			}else{
				showInfoDiv.innerHTML="你的浏览器不支持定位";
			}
		}
		function showPosition(position){
			var str="";
			str+="纬度:"+position.coords.latitude+"\n";
			str+="经度:"+position.coords.longitude;
			showInfoDiv.innerHTML=str;
		}
		function showError(error){
			switch(error.code){
				case error.PERMISSION_DENIED:
					showInfoDiv.innerHTML="权限拒绝."
					break;
				case error.POSITION_UNAVAILABLE:
					showInfoDiv.innerHTML="无法获取当前位置."
					break;
				case error.TIMEOUT:
					showInfoDiv.innerHTML="操作超时."
					break;
				case error.UNKNOWN_ERROR:
					showInfoDiv.innerHTML="未知错误."
					break;
			}
		}
	</script>
</body>
</html>

效果显示

navigator.geolocation.getCurrentPosition(showPosition,showError) ;

二参数用于处理错误.

error.PERMISSION_DENIED
权限拒绝

error.POSITION_UNAVAILABLE
无法获取当前位置

error.TIMEOUT
操作超时

error.UNKNOWN_ERROR
未知错误