1. 程式人生 > >HTML5地理定位-Geolocation API

HTML5地理定位-Geolocation API

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瀏覽器在國內無法直接定位

原文地址:https://segmentfault.com/a/1190000014939935