html5定位功能的实现

在开发防丢app的时候，需要定位功能，apiclound提供了调用底层的接口获取手机的经纬度，但是功能不是很完善，在无网络的状态下不可用，项目不是基于cordova开发，也无法找到相应的模块，于是尝试用html5的Geolocation API来实现获取地理位置的功能

Geolocation定义

geolocation api可以通过设备的底层来获取地理位置信息，例如经度和纬度。常见的信息来自于全球定位系统（GPS）和基于网络ip地址和GSM / CDMA

getCurrentPosition

getCurrentPosition可以传三个参数

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

通过getCurrentPosition接口来获取设备的地理位置。这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。当定位被确定后，定义的回调函数就会被执行。您可以选择性地提供第二个回调函数，当有错误时会被执行。第三个参数也是可选的，您可以通过该对象参数设定最长可接受的定位返回时间、等待请求的时间和是否获取高精度定位。

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
    maximumAge: 600000,
    timeout: 0
  });

  function successCallback(position) {}

  function errorCallback(error) {
    switch (error.code) {
    case error.TIMEOUT:
      showError("请求超时!");
      break;
    case error.POSITION_UNAVAILABLE:
      showError('检测不到位置信息');
      break;
    case error.PERMISSION_DENIED:
      showError('无效权限');
      break;
    case error.UNKNOWN_ERROR:
      showError('未知错误');
      break;
    }
  }
}

获取到的信息如下图：

watchPosition

watchPosition是用来监视定位的（设备发生了移动，或获取到了更高精度的地理位置信息）watchPosition()函数会返回一个 ID，唯一地标记该位置监视器。您可以将这个 ID 传给 clearWatch() 函数来停止监视用户位置。

function positionHandle(position) {
  console.log(position);
}

var watchId = navigator.geolocation.watchPosition(positionHandle);

function clearGeoWatch() {
  navigator.geolocation.clearWatch(watchId);
}

options选项

getCurrentPosition和watchPosition都可以指定第三个参数options，options可选值有

enableHighAccuracy

在PC的浏览器中 HTML5 的地理位置功能获取的位置精度不够高，如果借助这个 HTML5 特性做一个城市天气预报是绰绰有余，但如果是做一个地图应用，那误差还是太大了。不过，如果是移动设备上的 HTML5 应用，可以通过设置 enableHighAcuracy 参数为 true，调用设备的 GPS 定位来获取高精度的地理位置信息。

timeout

设定地理位置获取的超时时间（单位为毫秒，用户选择允许的时间不计算在内）

maximumAge

表示允许设备从缓存中读取位置，缓存的过期时间，单位是毫秒，设为0来禁用缓存读取。如果返回的是缓存中的时间，会在timestamp中反映出来。