使用navigator.geolocation來獲取用戶的地理位置信息

使用navigator.geolocation來獲取用戶的地理位置信息
 W3C 中新添加了一個名爲 Geolocation的 API 規範，Geoloaction API的做用就是經過瀏覽器獲取用戶的地理位置。咱們可使用navigator.geolocation來簡單的獲取用戶的地理位置信息。本文中將簡單介紹下W3C的Geolocation。
Geolocation在javascript的navigator 對象中，咱們能夠經過 navigator.geolocation 來使用它。不支持 geolocation 的瀏覽器並不包含這一對象，那麼能夠經過下面的代碼來作能力檢測，對不一樣的瀏覽器作不一樣的處理。
if (navigator.geolocation) {
        alert( ' 瀏覽器支持 geolocation ' );
}else{
        alert( ' 瀏覽器不支持 geolocation ' );
}
在訪問 geolocation 對象時，即調用 geolocation 下面的方法時，瀏覽器會彈出提示，詢問用戶是否許可網站提供的位置服務，只有在獲得用戶許可事後，服務纔會繼續，不然將被中止，在稍後你將會了解到，咱們可以捕獲到用戶拒絕服務的動做。下面這張圖分別是 Chrome , Firefox 和 Opera 在初次訪問 geolocation 時，給用戶的提示：

初次使用geolocation時的警告框
經常使用的navigator.geolocation對象有如下三種方法：
1獲取當前地理位置：navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
2持續獲取地理位置：navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)
3清除持續獲取地理位置事件：navigator.geolocation.clearWatch(watch_position_id)
其中success_callback_function爲成功以後處理的函數，error_callback_function爲失敗以後返回的處理函數，參數position_options是配置項，由JSON格式傳入：
4enableHighAccuracy：true/false，它將告訴瀏覽器是否啓用高精度設備，所謂的高精度設備包含但不侷限於前面所提到的 GPS 和 WIFI，值爲 true 的時候，瀏覽器會嘗試啓用這些設備，默認指爲 true，在這種狀況下，瀏覽器會盡量地進行更爲精確的查詢，簡單地說，若是用戶有可用的 GPS 設備，會返回 GPS 設備的查詢結果，IP 是最後的選擇，對於移動設備來講，網絡接入點(基站)或許成爲另外一個選擇，對此我尚未徹底瞭解，但根據測試，即時沒有任何額外功能的手機，也可以獲得更爲精確的查詢結果。
5maximumAge：單位毫秒，告訴設備緩存時間，主要用於設備的省電或者節省帶寬方面。
6timeout：單位毫秒，超時事件，獲取位置信息時超出設定的這個時長，將會觸發錯誤，捕獲錯誤的函數將被調用，而且錯誤碼指向TIMEOUT。
例以下面的代碼：
var geo=navigator.geolocation.getCurrentPosition(geo_success, geo_error, {enableHighAccuracy:true, 
    maximumAge:30000, 
    timeout:27000});


獲取當前地理位置方法：navigator.geolocation.getCurrentPosition
當得到用戶的許可事後，便一切就緒。咱們將經過 geolocation 下的 getCurrentPosition 方法來獲取用戶當前的地理位置信息。
一、正確返回地理位置信息的處理函數
例如咱們的成功處理函數這樣寫：
function getPositionSuccess( position ){
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        document.write( "您所在的位置： 經度" + lat + "，緯度" + lng );
}
處理函數中的position 對象包含了用戶的地理位置信息，該對象下面的 coords 子對象包含了用戶所在的緯度和經度信息，經過 position.coords.latitude 能夠訪問緯度，而 position.coords.longitude 中存放了經度的信息，用戶的位置信息越精確，這兩個數字後面的小數點越長。事實上，在 Firefox 中，position 對象下還附帶有另外一個 address 對象，這個對象包含這個經緯度下的國家名，城市名甚至街道名，例以下面的代碼：
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其餘返回信息：
7coords.accuracy：返回經緯度的精度（米）
8coords.speed :速度
9coords.altitude ：當前的高度，海拔（米）
10coords.altitudeAccuracy：高度的精度（米）
11coords.heading：朝向
二、返回錯誤時的處理函數
上面都是成功獲取到用戶位置信息的處理，可是出現問題的狀況在所不免，當獲取用戶的位置信息出錯時，傳遞到 getCurrentPosition 的第二個函數類型參數被調用，一個包含具體出錯信息的對象會被傳遞進去，錯誤將被捕獲。
function getPositionError(error){
    switch(error.code){
        case error.TIMEOUT :
            alert( " 鏈接超時，請重試 " );
            break;
        case error.PERMISSION_DENIED :
            alert( " 您拒絕了使用位置共享服務，查詢已取消 " );
            break;
        case error.POSITION_UNAVAILABLE : 
            alert( " 親愛的火星網友，很是抱歉，咱們暫時沒法爲您所在的星球提供位置服務 " );
            break;
    }
}
error 對象下面，存放了3個常量：
12TIMEOUT:表示獲取信息超時。
13PERMISSION_DENIED：表示用戶選擇了拒絕了位置服務。
14POSITION_UNAVAILABLE：表示位置不可知。
說明：而每一次出錯時 error.code 將指向3個常量之中的一個。
移動設備持續獲取地理位置方法：navigator.geolocation.watchPosition
對於使用移動設備的用戶來講，位置並非固定的，W3C 固然也考慮到了這一點，watchPosition 是一個專門用來處理這一狀況的方法，watchPosition 被調用後，瀏覽器會跟蹤設備的位置，每一次位置的變化，watchPosition 中的代碼都將會被執行。對於致力於移動設備 web 開發的同窗來講，這個方法是及其重要的，它也許將會改變 web 移動客戶端的格局。
使用navigator.geolocation.clearWatch既能夠清除navigator.geolocation.watchPosition的監控事件。
Geolocation實例演示
查看Geolocation實例演示
寫在最後
定位通常採用的wifi會比較準確，採用IP的時候通常會定位到所在的城市中心，更多關於地圖定位的文章：
15php獲取來訪者IP信息
16php、js兩種不一樣方式根據關鍵詞返回經緯度接口【基於Google map API】
17根據IP返回地理位置地址以及地理經緯度的方法
18基於Google地圖的根據IP返回地理位置的接口