获取当前位置城市

最新推荐文章于 2022-11-09 22:45:27 发布

肖肖肖丽珠

最新推荐文章于 2022-11-09 22:45:27 发布

阅读量594

点赞数

分类专栏：前端小知识

本文链接：https://blog.csdn.net/qq_33769914/article/details/71172997

版权

前端小知识专栏收录该内容

209 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button οnclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
   if (navigator.geolocation)
   {
       navigator.geolocation.getCurrentPosition(showPosition,showError);   //如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
   }
   else
   {
       x.innerHTML="该浏览器不支持获取地理位置。";
   }
}

function showPosition(position)
{
   var latlon=position.coords.latitude+", "+position.coords.longitude;   //纬度:"+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="用户拒绝对获取地理位置的请求。"
           break;
       case error.POSITION_UNAVAILABLE:
           x.innerHTML="位置信息是不可用的。"
           break;
       case error.TIMEOUT:
           x.innerHTML="请求用户地理位置超时。"
           break;
       case error.UNKNOWN_ERROR:
           x.innerHTML="未知错误。"
           break;
   }
}
</script>
</body>
</html>