HTML5地理定位-Geolocation API
阿新 • • 發佈:2020-04-29
HTML5提供了一組Geolocation API,來自navigator定位物件的子物件,獲取使用者的地理位置資訊
Geolocation API使用方法:
1.判斷是否支援 navigator.geolocation
2.呼叫getCurrentPosition(successCallback,errorCallback,options),返回定位資料
引數說明:
引數1:successCallback 成功的回撥函式,把position物件作為引數傳入,position物件包含定位的相關資訊
latitude 緯度數值 longitude 經度數值 speed 運動的速度(假設你在地平線上運動),單位米/秒。 accuracy 精確度單位米 altitude 高度,單位米 altitudeAccuracy 高度的精確地,單位米 heading 運動的方向,相對於正北方向的角度。
引數2:errorCallback 出錯的回撥函式
error.PERMISSION_DENIED: 使用者拒絕對獲取地理位置的請求。
error.POSITION_UNAVAILABLE: 位置資訊是不可用的。
error.TIMEOUT: 請求使用者地理位置超時。
error.UNKNOWN_ERROR: 未知錯誤。
引數3:options 選項配置
enableHighAccuracy: true 指示瀏覽器獲取高精度的位置 timeout: 5000 指定獲取地理位置的超時時間,預設不限時,單位為毫秒 maximumAge: 3000 最長有效期,即位置快取
程式碼示例:
<script type="text/javascript"> //支援html5的瀏覽器才可以使用Geolocation API //console.log(navigator.geolocation); if(navigator.geolocation){ //console.log("支援!"); //引數1: function successFn(position) { //latitude 緯度 //longitude 經度 console.log("position",position); console.log(position.coords); console.log("緯度 ",position.coords.latitude,"經度 ",position.coords.longitude); } //引數2: function errorFn(error) { switch(error.code) { case error.PERMISSION_DENIED: console.log("使用者拒絕對獲取地理位置的請求User denied the request for Geolocation."); break; case error.POSITION_UNAVAILABLE: console.log("位置資訊是不可用Location information is unavailable."); break; case error.TIMEOUT: console.log("使用者的請求超時The request to get user location timed out."); break; case error.UNKNOWN_ERROR: console.log("未知錯誤An unknown error occurred."); break; } } //引數3: var options = { // 指示瀏覽器獲取高精度的位置 enableHighAccuracy: true,// 指定獲取地理位置的超時時間,預設不限時,單位為毫秒 timeout: 5000,// 最長有效期,即位置快取 maximumAge: 3000 } //返回定位資料,如果出錯返回錯誤資訊,連結超時的配置 navigator.geolocation.getCurrentPosition(successFn,errorFn,options); } else{ console.log("不支援! Geolocation is not supported by this browser."); }
</script>
注意:google瀏覽器在國內無法直接定位