使用navigator.geolocation來擷取使用者的地理位置資訊

來源：http://js8.in/672.html

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格式傳入：

1. enableHighAccuracy：true/false，它将告訴浏覽器是否啟用高精度裝置，所謂的高精度裝置包含但不局限于前面所提到的 GPS 和 WIFI，值為 true 的時候，浏覽器會嘗試啟用這些裝置，預設指為 true，在這種情況下，浏覽器會盡可能地進行更為精确的查詢，簡單地說，如果使用者有可用的 GPS 裝置，會傳回 GPS 裝置的查詢結果，IP 是最後的選擇，對于移動裝置來說，網絡接入點(基站)或許成為另一個選擇，對此我還沒有完全了解，但根據測試，即時沒有任何額外功能的手機，也能夠得到更為精确的查詢結果。
2. maximumAge：機關毫秒，告訴裝置緩存時間，主要用于裝置的省電或者節省帶寬方面。
3. timeout：機關毫秒，逾時事件，擷取位置資訊時超出設定的這個時長，将會觸發錯誤，捕獲錯誤的函數将被調用，并且錯誤碼指向TIMEOUT。

例如下面的代碼：

var geo=navigator.geolocation.getCurrentPosition(geo_success, geo_error, {enableHighAccuracy:true, 
    maximumAge:30000, 
    timeout:27000});
           

 擷取目前地理位置方法：navigator.geolocation.getCurrentPosition       
         

當獲得使用者的許可過後，便一切就緒。我們将通過 geolocation 下的 getCurrentPosition 方法來擷取使用者目前的地理位置資訊。

        
 1、正确傳回地理位置資訊的處理函數       
         

例如我們的成功處理函數這樣寫：
              
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其他傳回資訊：
         
 
 coords.accuracy：傳回經緯度的精度（米）       
      
 coords.speed :速度       
      
 coords.altitude ：目前的高度，海拔（米）       
      
 coords.altitudeAccuracy：高度的精度（米）       
      
 coords.heading：朝向       
     
      
 2、傳回錯誤時的處理函數       
         
上面都是成功擷取到使用者位置資訊的處理，但是出現問題的情況在所難免，當擷取使用者的位置資訊出錯時，傳遞到 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個常量：
         
 
 TIMEOUT:表示擷取資訊逾時。       
      
 PERMISSION_DENIED：表示使用者選擇了拒絕了位置服務。       
      
 POSITION_UNAVAILABLE：表示位置不可知。       
     
         
說明：而每一次出錯時 error.code 将指向3個常量之中的一個。
        
 移動裝置持續擷取地理位置方法：navigator.geolocation.watchPosition       
         
對于使用移動裝置的使用者來說，位置并不是固定的，W3C 當然也考慮到了這一點，watchPosition 是一個專門用來處理這一情況的方法，watchPosition 被調用後，浏覽器會跟蹤裝置的位置，每一次位置的變化，watchPosition 中的代碼都将會被執行。對于緻力于移動裝置 web 開發的同學來說，這個方法是及其重要的，它也許将會改變 web 移動用戶端的格局。
使用navigator.geolocation.clearWatch既可以清除         navigator.geolocation.watchPosition                的監控事件。
        
 Geolocation執行個體示範       
         
檢視Geolocation執行個體示範
        
 寫在最後       
         
定位一般采用的wifi會比較準确，才用IP的時候一般會定位到所在的城市中心，更多關于地圖定位的文章：