HTML5新特性——HTML5 地理定位

来源：互联网发布：ikbc c87换mac键位编辑：程序博客网时间：2024/05/17 02:51

转自：http://www.cnblogs.com/super-d2/archive/2012/10/12/2721082.html

定位用户的位置

HTML5 Geolocation API 用于获得用户的地理位置。

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

浏览器支持

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

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

HTML5 - 使用地理定位

请使用 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>

google地图应用：

View Code

Geolocation 对象 - 其他有趣的方法

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

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：

Geolocation 对象 - 其他有趣的方法

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

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：

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

0 0