html5 定位，地理位置

最新推荐文章于 2024-07-18 15:09:36 发布

zhangbaoming815

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量184

点赞数

分类专栏： html5 文章标签： html5 geolocation 定位

本文链接：https://blog.csdn.net/zhangbaoming815/article/details/84276725

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用html5定位你的地理位置

自从定位技术让步于个人隐私，指定位置只能在用户许可的情况下使用

通过使用getCurrentPosition()方法来获得用户的位置

下面的例子返回用户的经度和纬度：

并在图中显示出来，在使用时当请求跟踪位置的时候选择允许跟踪：

<body>
<p id="demo">Click the button to get your position:</p>
<button οnclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<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)
	  {
	  var latlon=position.coords.latitude+","+position.coords.longitude;

	  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
		  +latlon+"&zoom=14&size=400x300&sensor=false";
		  document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
	  }

	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>

zhangbaoming815

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 定位，地理位置

使用html5定位你的地理位置自从定位技术让步于个人隐私，指定位置只能在用户许可的情况下使用通过使用getCurrentPosition()方法来获得用户的位置下面的例子返回用户的经度和纬度：并在图中显示出来，在使用时当请求跟踪位置的时候选择允许跟踪：&lt;body&gt;&lt;p id="demo"&gt;Click the button to get y...
复制链接

扫一扫

专栏目录