Progressive Web App 位置存取: Geolocation API 取得地理資訊 | 前端三分鐘 | 一起用三分鐘分享技術與知識

文章目錄

1. 什麼是 Geolocation API?
2. 怎麼使用 Geolocation API?
3. 請求權限

什麼是 Geolocation API?

透過 Geolocation API 可以讓 Progressive Web App 存取用戶的位置，方便實作地理資訊相關應用。

怎麼使用 Geolocation API?

檢查支援度，然後針對支援的部分做漸進式增強，如果不支援的話可以使用 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.");
}

使用 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);

使用 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);