HTML5地理位置定位 Geolocation API

地理定位(geolocation)是最令人兴奋，而且得到了广泛支持的一个新API。通过这套API，JavaScript代码能够访问到用户的当前位置信息。当然，访问之前必须得到用户的明确许可，即同意在页面共享其位置信息。如果页面尝试访问其地理定位信息，浏览器就会显示一个对话框，请求用户许可共享其位置信息。

Geolocation API在浏览器中的实现是navigator.geolocation对象，这个对象包含3个方法。第一个是getCurrentPosition()，调用这个方法就会触发请求用户共享地理定位信息的对话框。这个方法接收3个参数：成功回调函数、可选的失败回调函数和可选的选项对象。

其中，成功返回调用函数会接收到一个Position对象参数，该参数有两个属性：coords和timestamp。而coords对象中将包含下列与位置相关的信息。

• latitude:以十进制度数表示的纬度。
• longitude:以十进制度数表示的经度。
• accuracy:经、纬度坐标的精度，以米为单位。有些浏览器还可能会在coords对象中提供如下属性。
• altitude:以米为单位的海拔高度，如果没有相关数据则值为null。
• altitudeAccuracy:海拔高度的精度，以米为单位，数值越大越不精确。
• heading：指南针的方向，0°表示正北，值为NaN表示没有检测到数据。
• speed：速度，每秒移动多少米，如果没有相关数据则为null。

在实际开发中，latitude和longitude是大多数Web应用最常用到的属性。例如，以下代码将在地图上绘制用户的位置：

navigator.geolocation.getCurrentPosition(function(position) {
  drawMapCenteredAt(position.coords.latitude, position.coords.longitude);
});

以上介绍的是成功回调函数。getCurrentPosition()的第二个参数，即失败回调函数，在被调用的时候也会接收到一个参数。这个参数是一个对象，包含两个属性：message和code。其中，message属性中保存着给人看的文本消息，解释为什么会出错，而code属性中保存着一个数值，表示错误的类型：用于拒绝共享（1）、位置无效（2）或者超时（3）。实际开发中，大多数Web应用只会将错误消息保存到日志文件中，而不一定会因此修改用户界面。例如：

navigator.geolocation.getCurrentPosition(function(position){
    drawMapCenteredAt(position.coords.latitude, position.coords.longitude);
}, function(error) {
    console.log("Error code: " + error.code);
    console.log("Error message: " + error.message);
});

getCurrentPosition()的第三个参数是一个选项对象，用于设定信息的类型。可以设置的选项有三个：enableHighAccuracy是一个布尔值，表示必须尽可能使用最准确的位置信息；timeout是以毫秒数表示的等待位置信息的最长时间；maximumAge表示上一次取得的坐标信息的有效时间，以毫秒表示，如果时间到则重新获得最新坐标信息。例如：

navigator.geolocation.getCurrentPosition(function(position){
    drawMapCenteredAt(position.coords.latitude, position.coords.longitude);
}, function(error) {
    console.log("Error code: " + error.code);
    console.log("Error message: " + error.message);
}, {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 25000
});

这三个选项都是可选的，可以单独设置，也可以与其它选项一起设置。除非确实需要非常精确的信息，否则建议保持enableHighAccuracy的false值（默认值）。将这个选项设置为ture需要更长的时候，而且在移动设备上还会导致消耗更多电量。类似的，如果不需要频繁更新用户的位置信息，那么可以将maximumAge设置为Infinity，从而始终都使用上一次的坐标信息。

如果你希望跟踪用户的位置，那么可以使用另一个方法watchPosition()。这个方法接收的参数与getCurrentPosition()效果相同。在第一次调用watchPosition()方法后，会取得当前位置，执行成功回调或者错误回调。然后，watchPosition()就地等待位置已改变的信号（它不会自己轮询位置）。

调用watchPosition()会返回一个数值标识符，用于跟踪监控的操作。基于这个返回值可以取消监控操作，只要将其传递给clearWatch()方法即可（与使用setTimeout()和clearTimeout()类似）。例如：

var watchId = navigator.geolocation.watchPosition(function(position){
    drawMapCenteredAt(position.coords.latitude, position.coords.longitude);
}, function(error) {
    console.log("Error code: " + error.code);
    console.log("Error message: " + error.message);
});
clearWatch(watchId);

以上例子调用了watchPosition()方法，将返回的标识符保存在了watchId中。然后，又将watchId传给了clearWatch()，取消了监控操作。

支持地理定位的浏览器有IE9+、Firefox 3.5+、Opeara 10.6+、Safari 5+、Chrome、iOS版Safari、Android版WebKit。

下面是一个简单的示例：

<div id="output"></div>
<script type="text/javascript">
    window.onload = function () {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
          var latitude = position.coords.latitude;
          var longitude = position.coords.longitude
          document.getElementById("output").innerHTML = "纬度是；" + latitude + "<br>经度是：" + longitude;
        }, function (error) {
             document.getElementById("output").innerHTML = error.message || "获取地理位置的时候发生了错误。";
        }, function (error) {
             console.log("Error code: " + error.code);
             console.log("Error message: " + error.message);
        });
      } else {
          alert("你的浏览器不支持 Geolocation API")
      }
    }
</script>

HTML5 Geolocation API 常用函数 getCurrentPosition()、watchPosition() 、clearWatch()
HTML5 Geolocation API 封装在 navigator.geolocation 属性里，各种接口即是 navigator.geolocation 对象的方法。
1、getCurrentPosition() 
getCurrentPosition 用来获取用户当前的位置信息，该方法带有三个参数：
 
 

  
    1、successCallback：成功获取用户位置信息后的回调函数
  2、errorCallback：获取用户位置信息失败时的回调函数
  3、positionOptions：可选。获取用户位置信息的配置参数
 
 
 
 

  
  
i）successCallback
  
  

   
   successCallback 函数带有一个参数，对象字面量格式，表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。其中 coords 属性包含以下7个值：
  1、accuracy：精确度
  2、latitude：纬度
  3、longitude：经度
  4、altitude：海拔
  5、altitudeAcuracy：海拔高度的精确度
  6、heading：朝向
  7、speed：
  
  
 
 
 
 

  
  
ii）errorCallback
  
  

   
   和 successCallback 函数一样带有一个参数，对象字面量格式，表示返回的错误代码。它包含以下两个属性：

   
   

    
      1、message：错误信息
  2、code：错误代码。
其中错误代码包括以下四个值：
  0 — UNKNOW_ERROR：表示不包括在其它错误代码中的错误，这里可以在 message 中查找错误信息
  1 — PERMISSION_DENIED：表示用户拒绝浏览器获取位置信息的请求
  2 — POSITION_UNAVALIABLE：表示网络不可用或者连接不到卫星
  3 — TIMEOUT：表示获取超时。必须在options中指定了timeout值时才有可能发生这种错误
   
   
  
  
  
  
iii）positionOptions
  
  

   
   positionOptions 的数据格式为JSON，有三个可选的属性：
  1、enableHighAcuracy — 布尔值： 表示是否启用高精确度模式，如果启用这种模式，浏览器在获取位置信息时可能需要耗费更多的时间。
  2、timeout — 整数： 表示浏览需要在指定的时间内获取位置信息，否则触发errorCallback。
  3、maximumAge — 整数/常量： 表示浏览器重新获取位置信息的时间间隔。
  
  
 
 
2、watchPosition() 
watchPosition 的三个参数和 getCurrentPosition 完全一样，不同的是 watchPosition 是设计用来实时获取＼检测用户的位置信息。它像一个追踪器一样时刻监视用户的位置，只要发生变化，浏览器就会触发 watchPosition 的回调函数。成功则触发 successCallback ，否则触发 errorCallback;
另外和  getCurrentPosition 不同的地方就是有返回值。类似于延迟函数/间隔函数（setTimeout/setInterval）那样，返回一个 ID ，可以被清除掉。这里是用接下来介绍的 clearWatch 清除。 
3、clearWatch() 
接受一个 watchPosition 返回的 ID，功能是清除对用户位置的循环监视。