HTML5 Geolocation API的正確使用方法

Geolocation是HTML5標準下的Web API,利用它可以取得裝置的目前位置資訊（座標），此API有三種方法：getCurrentPosition、watchPosition和clearWatch，其中最常用的是getCurrentPosition方法，剩下兩個方法需要搭配使用！

瀏覽器相容性檢測：

該api透過navigator.geolocation物件發布，只有在此物件存在的情況下，才可以使用它的地理定位服務，檢測方法如下：

 if (navigator.geolocation) { // 定位程式碼寫在這裡} else { alert('Geolocation is not supported in your browser')}

取得使用者的目前位置：

使用getCurrentLocation方法即可取得使用者的位置信息，該方法有三個參數：

 // 初始化參數const options = { // 高精確度： true / false enableHighAccuracy: true, // 等待回應的最長單位：毫秒timeout: 5 * 1000, // 應用程式願意接受的快取位置的最長時間maximumAge: 0}// 成功回呼函數: data包含位置資訊const handleSuccess = data => console.log(data)//失敗回調函數: error包含錯誤信息const handleError = error => console.log(error)if (navigator.geolocation) { // 定位代碼寫在這裡navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options)} else { alert ('Geolocation is not supported in your browser')}

以下是具有更多細節的程式碼:

 const handleSuccess = data => { const { coords, // 位置資訊timestamp // 成功取得位置資訊時的時間戳} = data const { accuracy, // 傳回結果的精確度（公尺） altitude, // 相對於水平面的高度altitudeAccuracy, // 傳回高度的精確度（公尺） heading, // 主機裝置的行進方向，從正北方向順時針方向latitude, //緯度longitude, // 經度speed // 裝置的行進速度} = coords // 印出來看看console.log('timestamp =', timestamp) console.log('accuracy =', accuracy) console.log('altitude =', altitude) console.log('altitudeAccuracy =', altitudeAccuracy) console.log('heading =', heading) console.log('latitude =', latitude) console.log('longitude =', longitude) console.log('speed =', speed)}const handleError = error => { switch (error. code) { case 1: console.log('位置服務請求被拒絕') break case 2: console.log('暫時取得不到位置資訊') break case 3: console.log('取得資訊逾時') break case 4: console.log('未知錯誤') break }}const opt = { // 高精確度： true / false enableHighAccuracy: true, // 等待回應的最長單位：毫秒timeout: 5 * 1000, //應用程式願意接受的快取位置的最大年限maximumAge: 0}if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(handleSuccess, handleError, opt)} else { alert('Geolocation is not supported in

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。