Web Geolocation API
定位使用者位置
HTML Geolocation API 用於獲取使用者的地理位置。
由於這可能會損害隱私，因此在使用者批准之前無法獲得該位置。
注意
對於具有 GPS 的裝置（如智慧手機），地理位置通常最準確。
瀏覽器支援
所有瀏覽器都支援 Geolocation API
| 是 | 是 | 是 | 是 | 是 |
注意
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 = "此瀏覽器不支援地理定位。";
}
}
function showPosition(position) {
x.innerHTML = "緯度: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
自己動手試一試 »
示例說明
- 檢查 Geolocation 是否受支援
- 如果支援，則執行 getCurrentPosition() 方法。否則，向用戶顯示一條訊息
- 如果 getCurrentPosition() 方法成功，它會將一個座標物件返回給引數中指定的函式（showPosition）
- showPosition() 函式輸出緯度和經度
上面的示例是一個非常基本的 Geolocation 指令碼，沒有錯誤處理。
處理錯誤和拒絕
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 Maps。
在下面的示例中，返回的緯度和經度用於在 Google Map 中顯示位置（使用靜態影像）
示例
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+"'>";
}
特定於位置的資訊
此頁面演示瞭如何在地圖上顯示使用者的位置。
Geolocation 對於特定於位置的資訊也非常有用，例如
- 最新的本地資訊
- 顯示使用者附近的興趣點
- 逐嚮導航 (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 = "此瀏覽器不支援地理定位。";
}
}
function showPosition(position) {
x.innerHTML = "緯度: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
自己動手試一試 »
