Web Geolocation API

定位用戶的位置

HTML Geolocation API 用于獲取用戶的地理位置。

由于這可能會損害隱私，除非用戶批準，否則位置不可用。

親自試一試

注釋：地理定位對于帶有 GPS 的設備（如智能手機）最為準確。

所有瀏覽器都支持 Geolocation API：

Chrome IE Firefox Safari Opera
支持 支持 支持 支持 支持

注釋：從 Chrome 50 開始，Geolocation API 將僅適用于安全上下文，例如 HTTPS。如果您的站點托管在非安全源（例如 HTTP）上，則獲取用戶位置的請求將不再起作用。

使用 Geolocation API

getCurrentPosition() 方法用于返回用戶的位置。

下面的例子返回用戶位置的緯度和經度：

實例

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

親自試一試

例子解釋：

  1. 檢查是否支持 Geolocation
  2. 如果支持，請運行 getCurrentPosition() 方法。如果沒有，則向用戶顯示一條消息
  3. 如果 getCurrentPosition() 方法成功，則返回一個 coordinates 對象給參數 (showPosition) 中規定的函數
  4. showPosition() 函數輸出緯度和經度

上面的例子是一個非常基本的地理定位腳本，沒有錯誤處理。

處理錯誤和拒絕

getCurrentPosition() 方法的第二個參數用于處理錯誤。如果無法獲取用戶的位置，它規定要運行的函數：

實例

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}

親自試一試

在地圖中顯示結果

如需在地圖中顯示結果，您需要訪問地圖服務，例如 Google 地圖。

在下面的例子中，返回的緯度和經度用于在 Google 地圖中顯示位置（使用靜態圖像）：

實例

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
  "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

Location-specific 信息

此頁面演示了如何在地圖上顯示用戶的位置。

Geolocation 對于特定于位置的信息也非常有用，例如：

  • 最新的本地信息
  • 顯示用戶附近的興趣點
  • 逐向導航（Turn-by-turn navigation）(GPS)

getCurrentPosition() 方法 - 返回數據

getCurrentPosition() 方法在成功時返回一個對象。會始終返回緯度、經度和精度屬性。如果可用，則返回其他屬性：

屬性 返回
coords.latitude 以十進制數表示的緯度（始終返回）。
coords.longitude 以十進制數表示的經度（始終返回）。
coords.accuracy 位置精度（始終返回）。
coords.altitude 平均海平面以上的高度（以米計）（如果可用則返回）。
coords.altitudeAccuracy 位置的高度精度（如果可用則返回）。
coords.heading 從北順時針方向的航向（如果可用則返回）。
coords.speed 以米/秒計的速度（如果可用則返回）。
timestamp 響應的日期/時間（如果可用則返回）。

Geolocation 對象 - 其他有趣的方法

Geolocation 對象還有其他有趣的方法：

  • watchPosition() - 返回用戶的當前位置，并隨著用戶移動（如汽車中的 GPS）繼續返回更新的位置。
  • clearWatch() - 停止 watchPosition () 方法。

下面的例子展示了 watchPosition() 方法。你需要準確的 GPS 設備來測試（比如智能手機）：

實例

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
</script>

親自試一試