Progressive Web App 取得 Geolocation API 地理资讯 (28)

什麽是 Geolocation API?

透过 Geolocation API 可以让 Progressive Web App 存取用户的位置，方便实作地理资讯相关应用。

怎麽使用 Geolocation API?

1. 检查支援度，然後针对支援的部分做渐进式增强，如果不支援的话可以使用 GEO IP 相关服务，虽然较不准确，但仍然有一定的参考价值。
   • https://get.geojs.io/v1/ip/geo.json

if (navigator.geolocation) {
  console.log("Geolocation is supported!");
} else {
  console.log("Geolocation is not supported for this Browser/OS.");
}

2. 使用 navigator.geolocation.getCurrentPosition 一次性取得用户地理位置资讯。

var startPos;
var geoSuccess = function (position) {
  startPos = position;
  console.log(
    "lat",
    startPos.coords.latitude,
    "lng",
    startPos.coords.longitude
  );
};
navigator.geolocation.getCurrentPosition(geoSuccess);

3. 使用 navigator.geolocation.watchPosition 持续追踪用户地理位置资讯
   • enableHighAccuracy: 启用後解析速度会下降，并且电池耗电会增加
   • timeout: 避免让用户等太久，所以设置 timeout，超过就会跑错误处理

var id, target, options;

function success(pos) {
  var crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log("成功追踪");
    navigator.geolocation.clearWatch(id);
  }
}

function error(err) {
  console.warn("ERROR(" + err.code + "): " + err.message);
}

target = {
  latitude: 0,
  longitude: 0,
};

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0,
};

id = navigator.geolocation.watchPosition(success, error, options);

4. 不需要持续追踪的时候，要记得使用 clearWatch

navigator.geolocation.clearWatch(id);

请求权限

让使用者同意位置共用的时机，在 App 启动时就请求权限会是最烂的时机，而且对於在页面载入时要求提供位置的网站，用户通常会不信任。

在 Android 5.0 之後的实作上也是在要使用时才会向使用者请求权限，所以在实作上要假设:

• 假设使用者不会提供位置
• 说明为什麽需要存取使用者位置

在用户使用特定功能时才让用户主动操作并出现提示，且要准备好使用被拒绝的备案。

图片来源: https://developers.google.com/