HTML5地理定位

最新推荐文章于 2024-08-08 23:45:45 发布

时间解

最新推荐文章于 2024-08-08 23:45:45 发布

阅读量406

点赞数

分类专栏： HTML 文章标签： geolocatio GetPositio watchPosit

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML5地理定位

获取当前位置 [navicator.geolocation.getCurrentPosition]

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

获取当前位置，并显示经纬度

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="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>

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

持续跟踪位置 [navicator.geolocation.watchPosition]

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() - 停止 watchPosition() 方法

跟踪当前位置并显示

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>

<script>
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>