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

获取到的信息如下图:

longtitude 经度
latitude 纬度
accuracy 精度
altitude 海拔高度
heading 角度

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中反映出来。

标签: javascript

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论