HTML5 地理位置

地理定位功能是 HTML5 新增的标准，早期的 HTML 和 JavaScript 没有操控硬件和文件的权限，因为页面交互效果比较简单；但是 HTML5 之后网页已经逐渐应用于各种复杂场景包括移动设备，所以增加了各种与硬件交互的 API 接口，地理位置就是其中之一。

1. 早期的方式

在 HTML5 之前，获取地理位置的解决方法是在已知 IP 位置的数据库中查找访问者的 IP 地址，然后根据 IP 数据库查找到对应的位置。虽然这种方法的准确度远低于使用 GPS 设备的准确度，但是这些数据库通常能够定位到访客大致的地址范围，这对于许多应用来说是足够有用的，但是数据库需要经常维护更新。

2. 检测是否支持地理位置

并非所有的浏览器或者硬件设备都支持地理位置功能，所以使用之前需要进行容错判断：


if (navigator.geolocation)    {//判断地理位置是否支持                     
    //业务代码
}
else{
    x.innerHTML="该浏览器不支持获取地理位置。";
}
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！

获取地理位置之前需要用户点击同意按钮，因为该功能牵涉到隐私。

3. 地理位置 API

3.1 获取当前位置

使用 getCurrentPosition 函数获取用户当前的地理位置，这个函数有 3 个参数：

第一个参数设置成功获取的回调函数；
第二个参数设置失败之后的回调函数；
第三个参数设置一些可选参数项。

例如：

navigator.geolocation.getCurrentPosition(function(position) {
    //TODO 成功时的处理
    var timestamp = position.timestamp;
    var coords      = position.coords;
}, function(error) {
    //TODO 失败时的处理
    console.log(error);
}, {
   //参数设置
})
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！

成功获取之后的回调函数中通过参数传递的方式可以拿到地理位置的对象，它是一个
Geoposition对象，上述示例使用 position 变量表示，这个对象包含 2 个属性：

timestamp 时间戳
coords 一个coordinates 类型对象，包括
- accuracy 精度值
- altitude 海拔
- altitudeAccuracy 海拔的精度
- heading 设备前进方向
- latitude 经度
- longitude 纬度
- speed 前进速度
  第三个参数是一个 PositionOptions 对象，它包含 3 个用于设置的属性：
enableHighAccuracy 是否使用最高精度表示结果
timeout 设置超时时间
maximumAge 表示获取多久的缓存位置

3.2 监视位置

使用 watchPosition 函数可以定时获取用户地理位置信息，在用户设备的地理位置发生改变的时候自动被调用。这个函数跟 getCurrentPosition 函数的使用方式基本一致。

navigator.getlocation.watchPosition(function(pos){
    //业务代码
},function(err){
},
{}
)
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！

3.3 清除监视

使用 clearWatch 函数删除 watchPosition 函数注册的监听器：

var watch = navigator.geolocation.watchPosition(show_map, handle_error, {enableHighAccuracy: true,timeoout: 175000, maximumAge: 75000})
clearWatch(watch); //清除监视
                                                                                            代码块                            
                                                            预览                                复制                                复制成功！