HTML5 的 Geolocation(地理位置) API

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);