google map 誕生到今年已經 15 年的樣子，地理資訊系統的應用目前也已經非常多元，不過這邊還是來講一下 HTML5 的 Geolocation(地理位置) API 該怎麼用吧。
要使用 geolocation 我們會使用到 navigator.geolocation.getCurrentPosition()，會依據成功與失敗回傳 callback function。
navigator.geolocation.getCurrentPosition(getPosition, error);
成功的話我們會取得經緯度的資訊，失敗就處理一下錯誤訊息。
function getPosition(position) {
let lat=position.coords.latitude;
let lon=position.coords.longitude;
}
function error(error) {
console.log(error)
}
錯誤的訊息則大致會有以下這些：
error.PERMISSION_DENIED：使用者拒絕存取地理資訊
error.POSITION_UNAVAILABLE：無法取得地理資訊
error.TIMEOUT：請求時間逾時
error.UNKNOWN_ERROR：未知錯誤
Geolocation 的定位是透過電腦的IP、WIFI定位法、手機三角定位及GPS來取得經緯度，所以大部分的情況用手機的定位會比較精準一些，但也可能因為環境的關係會飄到奇怪的地方，要使用的話要注意誤差的問題。
接下來我們把座標畫到地圖上，這邊可以使用大家熟悉的 google maps，不過 google maps 申請 api 比較麻煩還可能要付費，所以我們改用 leaflet.js 這隻，先把 css 跟 js 讀入就可以使用了。
接著把讀到的點畫到地圖上：
let lat="取得的緯度", lon="取得的緯度";
let map = L.map('map').setView([lat, lon], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([lat, lon]).addTo(map)
.bindPopup('你現在的位置在這邊')
.openPopup();
完整的程式碼：
當位置移動的時候，我們可以透過 watchPosition 取得移動後的經緯度：
let watchId=navigator.geolocation.watchPosition(getPosition,error);
透過 clearWatch 清除監測
navigator.geolocation.clearWatch(watchId);
