使用 Geolocation API 的簡易行程計量器

Michael Mahemoff

簡介

Geolocation API 可讓您在使用者同意的情況下，找出使用者的位置並追蹤他們的移動。這項功能可用於使用者查詢，例如引導使用者前往目的地。也可以用來為使用者建立的內容加上「地理標記」，例如標記相片的拍攝地點。這個 API 與裝置無關，只要用戶端能以標準方式要求及接收位置資料，瀏覽器如何判斷位置並不重要。基礎機制可能是透過 GPS、Wi-Fi，或只是要求使用者手動輸入位置。由於任何查詢都需要一些時間，因此 API 是非同步的；每當您要求位置時，都會傳遞回呼方法。

這裡的範例是行程計量器，會顯示初始位置，並持續顯示自網頁載入後行經的距離。

步驟 1：確認相容性

Browser Support

• 5
• 12
• 3.5
• 5

Source

只要測試地理位置物件是否存在，即可輕鬆檢查相容性：

// check for Geolocation support
if (navigator.geolocation) {
  console.log('Geolocation is supported!');
}
else {
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

步驟 2：宣告行程計量器 HTML

在本範例中，您要建構行程計量器，因此請宣告下列 HTML：

<div id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</p>
<p>
Distance from starting location:<br/>
<span id="distance">0</span> km
</p>
</div>

接下來的幾個步驟會使用 Geolocation API，填入所有空白 span。

步驟 3：判斷使用者目前的位置

getCurrentPosition() 會以非同步方式回報使用者目前的位置。請在網頁載入後立即呼叫，以便正確填入並儲存起始位置：

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById('startLat').innerHTML = startPos.coords.latitude;
document.getElementById('startLon').innerHTML = startPos.coords.longitude;
});
};

如果這是該網域上的應用程式首次要求權限，瀏覽器通常會檢查使用者是否同意。視瀏覽器而定，可能也會有偏好設定，一律允許或不允許權限查詢，在這種情況下，系統會略過確認程序。

執行這段程式碼後，您應該就能看到起始位置。視瀏覽器使用的位置裝置而定，位置物件實際包含的資訊可能不只有經緯度，例如可能包含海拔高度或方向。您可以將位置變數記錄到控制台，進一步探索。

步驟 4：處理錯誤

不過，並非所有位置查詢都能成功。例如無法找到 GPS，或使用者突然停用位置查詢功能。如果發生錯誤，系統會呼叫 getCurrentPosition() 的第二個選用引數，因此您可以在回呼中通知使用者：

window.onload = function() {
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
// same as above
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
// error.code can be:
//   0: unknown error
//   1: permission denied
//   2: position unavailable (error response from locaton provider)
//   3: timed out
});
};

步驟 5：監控使用者的位置

先前對 getCurrentPosition() 的呼叫只在網頁載入時執行一次。如要追蹤變更，請使用 watchPosition()。每當使用者移動時，系統就會自動通知回呼函式：

navigator.geolocation.watchPosition(function(position) {
document.getElementById('currentLat').innerHTML = position.coords.latitude;
document.getElementById('currentLon').innerHTML = position.coords.longitude;
});

步驟 6：顯示行經距離

這個步驟與 Geolocation API 沒有直接關係，但可讓示範更完整，並提供位置資料的使用範例。在 watchPosition() 處理常式中新增一行，填入移動距離：

navigator.geolocation.watchPosition(function(position) {
// same as above
document.getElementById('distance').innerHTML =
    calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                    position.coords.latitude, position.coords.longitude);
});

calculateDistance() 函式會執行幾何演算法，判斷兩個座標之間的距離。JavaScript 實作項目改編自 Moveable Type 提供的指令碼，並依據創用 CC 授權使用：

function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
        Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}