HTML5之地理位置

HTML5 中的 Geolocation 用于获得用户的地理位置，Web应用程序获取到用户的地理位置后，可以根据该位置定制用户体验，接下来我看看具体是怎么获取用户的地理位置。

对象名称：Geolocation

方法：

1. getCurrentPosition(successCallback, errorCallback, options) 获取当前的地理位置。

2. watchPosition(successCallback, errorCallback, options) 监视位置随时间变化的情况。

3. clearWatch(watchId) 清除watchPosition()的监视。

其中successCallback()返回的属性：

1. coords.latitude 纬度

2. coords.longitude 经度

3. coords.accuracy 精度

4. coords.altitude 海拔

5. coords.altitudeAccuracy 海拔精度

6. coords.heading 方向

7. coords.speed 速度

8. timestamp 响应时间

其中options包含的属性：

1. enableHighAccuracy 是否启用高精度，默认为false

2. maximumAge 在重复获取地理位置时，指定获取位置信息的时间间隔，默认为0

3. timeout 获取地理位置的超时时间，默认不限时

兼容性：（来自http://caniuse.com）

一个实时监控地理位置的demo（实时监控比较消耗资源，如果没有该需求，则用getCurrentPosition获取当前位置）：

html代码：

<div id="demo"></div>

  

javascript代码：

var demo = document.getElementById("demo");
if(navigator.geolocation) { // 判断是否支持geolocation，如果支持，则获取地理位置
  navigator.geolocation.watchPosition(success, error);
}else {
  demo.innerHTML = 'sorry，浏览器不支持 geolocation！'
};
function success(position) { // 获取地理位置成功并输出相应参数
  demo.innerHTML = '纬度：' + position.coords.latitude + '<br />' +
                   '经度：' + position.coords.longitude + '<br />' +
                   '位置精度：' + position.coords.accuracy + '<br />' +
                   '海拔：' + position.coords.altitude + '<br />' +
                   '海拔精度：' + position.coords.altitudeAccuracy + '<br />' +
                   '方向：' + position.coords.heading + '<br />' +
                   '速度：' + position.coords.speed + '<br />' +
                   '响应时间：' + position.timestamp	
};
function error() { // 获取地理位置失败
  demo.innerHTML = 'sorry，无法检索你的位置！'
};

注释：Geolocation API 的数据来源可能是 GPS、IP 地址、RFID、WiFi、蓝牙 MAC 地址、GSM/CDMA 卡 ID 等，所以如果是非移动端，数据可能通过IP等其他方式获得，偏差可能会有点大。

some Known issues（来自http://caniuse.com）