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