HTML 地理定位 API
HTML 地理定位 API 用於定位使用者的位置。
定位使用者的位置
HTML 地理定位 API 用於獲取使用者的地理位置。
由於這可能會洩露隱私，除非使用者批准，否則無法獲取位置資訊。
注意：帶有 GPS 的裝置（如智慧手機）的地理定位最準確。
瀏覽器支援
表中的數字表示完全支援地理定位的第一個瀏覽器版本。
| API | |||||
|---|---|---|---|---|---|
| 地理定位 | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
注意：自 Chrome 50 起，地理定位 API 僅在 HTTPS 等安全上下文上執行。如果您的站點託管在非安全源（如 HTTP）上，則獲取使用者位置的請求將不再起作用。
使用 HTML 地理定位
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 +
"
經度： " + position.coords.longitude;
}
</script>
自己動手試一試 »
示例說明
- 檢查是否支援地理定位
- 如果支援，執行 getCurrentPosition() 方法。否則，向用戶顯示一條訊息
- 如果 getCurrentPosition() 方法成功，它會向引數中指定的函式 (showPosition) 返回一個 coordinates 物件
- showPosition() 函式輸出緯度和經度
上面的示例是一個非常基本的地理定位指令碼，沒有錯誤處理。
處理錯誤和拒絕
getCurrentPosition() 方法的第二個引數用於處理錯誤。它指定一個函式，在無法獲取使用者位置時執行
示例
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED
x.innerHTML = "使用者拒絕了地理定位請求。"
break;
case error.POSITION_UNAVAILABLE
x.innerHTML = "位置資訊不可用。"
break;
case error.TIMEOUT
x.innerHTML = "獲取使用者位置的請求超時。"
break;
case error.UNKNOWN_ERROR
x.innerHTML = "發生未知錯誤。"
break;
}
}
自己動手試一試 »
特定位置資訊
本頁演示瞭如何在地圖上顯示使用者的位置。
地理定位對於特定位置的資訊也非常有用，例如
- 最新的本地資訊
- 顯示使用者附近的興趣點
- 逐嚮導航 (GPS)
getCurrentPosition() 方法 - 返回資料
getCurrentPosition() 方法在成功時返回一個物件。始終返回緯度、經度和精度屬性。如果可用，則返回其他屬性
| 屬性 | 返回 |
|---|---|
| coords.latitude | 緯度，十進位制數（始終返回） |
| coords.longitude | 經度，十進位制數（始終返回） |
| coords.accuracy | 位置精度（始終返回） |
| coords.altitude | 海拔，以米為單位，高於平均海平面（如果可用，則返回） |
| coords.altitudeAccuracy | 位置海拔精度（如果可用，則返回） |
| coords.heading | 從正北方向順時針測量的航向，以度為單位（如果可用，則返回） |
| coords.speed | 速度，以米/秒為單位（如果可用，則返回） |
| timestamp | 響應的日期/時間（如果可用，則返回） |
地理定位物件 - 其他有趣的方法
地理定位物件還有其他有趣的方法
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 +
"
經度： " + position.coords.longitude;
}
</script>
自己動手試一試 »
