PWA Geolocation 地理位置 運用瀏覽器 API 獲取座標資訊並實作地圖互動功能

什麼是 Geolocation API？

Geolocation API 是一種 Web API，允許 Progressive Web App (PWA) 請求並獲取使用者裝置的地理位置資訊（通常為經緯度座標）。透過這項技術，網頁應用程式能提供如地圖導航、周邊商家搜尋、在地氣象顯示或即時路徑追蹤等功能。該 API 遵循「權限請求」機制，瀏覽器會在存取前徵詢使用者同意，且基於隱私與安全考量，僅限於 HTTPS 安全連線環境下運作。開發者可以透過 getCurrentPosition() 獲取單次位置，或使用 watchPosition() 來監控位置的持續變動。

什麼是 Geolocation API？PWA 地理定位解析

透過 Geolocation API，您的 Progressive Web App 就能輕鬆存取用戶的目前位置。這對於實作周邊店家搜尋、導航服務或運動追蹤等地理資訊應用來說至關重要。

小編覺得這項功能雖然強大，但開發者必須在「功能便利性」與「用戶隱私」之間取得平衡。

Geolocation API 實作教學：如何取得地理資訊？

在進行 網頁定位功能 開發時，小編整理了以下實作流程：

1. 檢查瀏覽器支援度與備案

首先要檢查 navigator.geolocation 是否存在。如果不支援，小編建議可以使用 GEO IP 相關服務（如 https://get.geojs.io/v1/ip/geo.json）作為備案，雖然精準度較低，但仍具備參考價值。

1
2
3
4
5

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

2. 一次性獲獲位置 (getCurrentPosition)

1
2
3
4
5
6
7
8
9
10
11

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

3. 持續追蹤用戶位置 (watchPosition 範例)

• enableHighAccuracy: 啟用後解析速度會下降，並且電池耗電會增加。
• timeout: 避免讓用戶等太久，所以設置 timeout，超過就會跑錯誤處理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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)

1

navigator.geolocation.clearWatch(id);

PWA 權限請求建議：建立使用者信任

讓使用者同意位置共用的時機，在 App 啟動時就請求權限會是最爛的時機，而且對於在頁面載入時要求提供位置的網站，用戶通常會不信任。

在 Android 5.0 之後的實作上也是在要使用時才會向使用者請求權限，所以在實作上要假設：

• 假設使用者不會提供位置。
• 說明為什麼需要存取使用者位置。

在用戶使用特定功能時才讓用戶主動操作並出現提示，且要準備好使用被拒絕的備案。

圖片來源: https://developers.google.com/

FAQ：PWA 地理定位常見問題

Q1：為什麼我的網站無法在 HTTP 下獲取位置？

A：現代瀏覽器（Chrome, Safari 等）為了保護使用者隱私，已將 Geolocation API 列為「強力功能」，規定僅能在 HTTPS 安全連線下執行。Localhost 則通常被視為安全網域，可用於開發測試。

Q2：getCurrentPosition 與 watchPosition 的精準度有差異嗎？

A：精準度主要由 options 中的 enableHighAccuracy 決定。getCurrentPosition 適合用來做初始定位或搜尋附近景點；watchPosition 則適合用於運動路徑紀錄或即時導航。但請注意，開啟高精準度會顯著增加行動裝置的耗電量。

Q3：如果使用者拒絕了權限，我該如何重新請求？

A：一旦使用者在瀏覽器提示中選擇「封鎖」，網頁程式碼無法再次主動彈出權限視窗。您必須導引使用者到瀏覽器設定（或點擊網址列旁的鎖頭圖示）手動重設權限。因此，在第一次請求前先說明理由是非常重要的。

透過正確實作 Geolocation API，您可以大幅增強 PWA 的實用性。記住，尊重使用者隱私並提供清晰的價值說明，是讓這項功能成功的關鍵！

• ← 上一篇
• 下一篇 →