成品連結：Geolocation、操作前程式碼、完成後程式碼

大家好，今天要做的是取得使用者當前位置的小工具。其實本來預期結果是指北針以及目前的速度，但在電腦上無法實現所以只能辨識經緯度而已...

Geolocation API

這個功能同樣是瀏覽器內建的 API，身處在 navigator 這個 object 當中。據文件所述，可以透過 navigator.geolocation 當中的 getCurrentPosition() 或是 watchPosition() 取得當前位置等資訊，這兩個方法的差異是 getCurrentPosition() 只會提供一次結果；但 watchPosition() 會每隔一段時間提供更新的結果，這在辨識方位、速度或當使用者移動中時會很實用。

當我們要使用上方任一方法（method）時，arguments 需帶入兩個 callback function，一個處理成功狀態，而另一個處理錯誤發生。

navigator.geolocation.getCurrentPosition(success, error);
// success & error 都是 callback

成功取得位置資訊

無論是 success 或是 error 都會有預設的 argument，success 是位置資訊，而 error 則是錯誤訊息

首先從 success 這個 callback 開始
如果你試著印出 success 所回傳的 argument，會發現是一包含有各種不同資訊的 object

我們會用到的是 latitude（緯度）與 longitude（經度），取得後印出在畫面

const latitude = document.querySelector('.latitude');
const longitude = document.querySelector('.longitude');

function success(position) {
    const lat = position.coords.latitude.toFixed(2);
    const lon = position.coords.longitude.toFixed(2);
    
    latitude.textContent = `緯度：${lat}`;
    longitude.textContent = `經度：${lon}`;
}

發生錯誤時

你沒看錯，剛剛的 success 已經結束了！接著處理發生錯誤時的狀況

會發生錯誤的情境可能是裝置無法取得位置資訊，而原因不外乎是使用者不允許取得位置資訊

function error(err) {
    console.log(err);
    alert(`Something went wrong... You need to allow for it to run!`);
}

如此我們就完成今天的任務啦！