HTML5 地理定位

最新推荐文章于 2020-03-03 13:16:26 发布

walkersc

最新推荐文章于 2020-03-03 13:16:26 发布

阅读量1.2k

点赞数

分类专栏： HTML5 文章标签： map

本文链接：https://blog.csdn.net/u013160024/article/details/20308843

版权

HTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p id="demo">点个按钮，获得您的坐标击这：</p>
	<button οnclick="getLocation()">试一下</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>

浏览器支持

Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

效果图

检测是否支持地理定位
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
showPosition() 函数获得并显示经度和纬度

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button οnclick="getLocation()">试一下</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>

效果图:

walkersc

关注

0
点赞
踩
0

收藏

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

Document 点个按钮，获得您的坐标击这：试一下 var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition);
复制链接

扫一扫

专栏目录