HTML5 地理位置定位（HTML5 Geolocation）

   HTML5的强大，无需我过多的介绍，其中Geolocation地理定位是HTML5的重要特性之一。使用这个特性我们就可以开发出基于地理位置信息的应用。例如你要实现查询用户周边酒店、加油站等功能时，你可以调用百度地图、高德地图、google地图等接口，然后根据用户的具体地理坐标位置等信息来搜寻周边事物。

   当然，每个人的地理位置信息是属于他个人的隐私。所以一般游览器都会先询问用户是否愿意，如果用户拒绝的话，则用户位置信息是不可用的。

   废话不多说，直接上代码：

<script>
var x=document.getElementById("demo");
functiongetLocation()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
functionshowPosition(position)
{
x.innerHTML="Latitude: "+ position.coords.latitude +
"<br />Longitude: "+ position.coords.longitude;
}
</script>

   以上是没有报错信息处理的代码。如果未能显示出纬度（Latitude）、经度（Longitude）信息的话，那你就得检查下游览器是否支持地理定位。

（1）如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。

（2）如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象。showPosition() 函数则是获得并显示经度和纬度。

   当然我们也可以有处理错误的功能反馈给用户：

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;
    }
  }

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

navigator.geolocation.getCurrentPosition(showPosition，showError);

   嗯，这样你就可以获得了用户的地理位置坐标信息。其实最重要的无非就是上面的那行代码，和获取坐标的两个方法：

position.coords.latitude//纬度
position.coords.longitude//经度

   就酱紫了？不，它还能获得些呢，客观别急，接着往下看。

   getCurrentPosition()--返回数据：

   嗯~是不是有点屌？但是你有没发现，这种定位并不是实时的。如果用户使用的是移动端，并且他在移动中，那坐标也必须跟随着在不停的改变中，而之前获得的坐标还有毛用啊！呵呵，莫慌！屌炸天的Geolocation对象，有个牛逼的方法：

   watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置。

   clearWatch() - 停止 watchPosition() 方法。

   如果你有台爱疯（iphone）之类精确的GPS设备，那就更是如虎添翼了。

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

   可以用手机或ipad去测试下,看看是否能实时定位。

本文出自 “学而思” 博客，请务必保留此出处http://linhongyu.blog.51cto.com/6373370/1403128

HTML5 地理位置定位（HTML5 Geolocation）,古老的榕树,5-wow.com