基于 html5 geolocation來獲取經緯度地址

jopen 11年前發布 | 65K 次閱讀 HTML5 前端技術

以前如果要獲取互聯網用戶所在地都是根據用戶的IP地址來獲取地理位置,這樣獲取到的數據和真實數據有很大的偏差。為了獲取更加精確的位置,可以使用了html5的geolocation來獲取經緯度,然后再獲取所在地理位置,如何獲取,我在下面會說到。先說下基本概念。

  Geolocation在的navigator 對象中,我們可以通過 navigator.geolocation 來使用它。不支持 geolocation 的瀏覽器并不包含這一對象,那么可以通過下面的代碼來做能力檢測,對不同的瀏覽器做不同的處理。在訪問 geolocation 對象時,即調用 geolocation 下面的方法時,瀏覽器會彈出提示,詢問用戶是否許可網站提供的位置服務,只有在得到用戶許可過后,服務才會繼續,否則將被停止。 

  常用的navigator.geolocation對象有以下三種方法:

  獲取當前地理位置:navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)

  持續獲取地理位置:navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)

  清除持續獲取地理位置事件:navigator.geolocation.clearWatch(watch_position_id)  

  參數position_options是配置項,由JSON格式傳入:

  enableHighAccuracy:true/false,它將告訴瀏覽器是否啟用高精度設備,所謂的高精度設備包含但不局限于前面所提到的 GPS 和 WIFI,值為 true 的時候,瀏覽器會嘗試啟用這些設備,默認指為 true,在這種情況下,瀏覽器會盡可能地進行更為精確的查詢,簡單地說,如果用戶有可用的 GPS 設備,會返回 GPS 設備的查詢結果,IP 是最后的選擇,對于移動設備來說,網絡接入點(基站)或許成為另一個選擇,對此我還沒有完全了解,但根據測試,即時沒有任何額外功能的手機,也能夠得到更為精確的查詢結果。

  maximumAge:單位毫秒,告訴設備緩存時間,主要用于設備的省電或者節省帶寬方面。

  timeout:單位毫秒,超時事件,獲取位置信息時超出設定的這個時長,將會觸發錯誤,捕獲錯誤的函數將被調用,并且錯誤碼指向TIMEOUT。

var position_option = {
                enableHighAccuracy: true,
                maximumAge: 30000,
                timeout: 20000
            };
navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, position_option);
?
function getPositionSuccess( position ){
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        alert( "您所在的位置: 緯度" + lat + ",經度" + lng );
        if(typeof position.address !== "undefined"){
                var country = position.address.country;
                var province = position.address.region;
                var city = position.address.city;
                alert(' 您位于 ' + country + province + '省' + city +'市');
        }
}

coords其他返回信息:

coords.accuracy:返回經緯度的精度(米)

coords.speed :速度

coords.altitude :當前的高度,海拔(米)

coords.altitudeAccuracy:高度的精度(米)

coords.heading:朝向
?
function getPositionError(error) {
    switch (error.code) {
        case error.TIMEOUT:
            alert("連接超時,請重試");
            break;
        case error.PERMISSION_DENIED:
            alert("您拒絕了使用位置共享服務,查詢已取消");
            break;
        case error.POSITION_UNAVAILABLE:
            alert("獲取位置信息失敗");
            break;
    }
}

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!