以前如果要獲取互聯網用戶所在地都是根據用戶的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; } }
在獲取城市信息的時候只有firefox會提供城市地址。chrom不會給出。當然sogou地圖提供了獲取位置信息的api。
鏈接地址:http://map.sogou.com/api/documentation/javascript/api2.5/interface_regeocode.html
移動設備持續獲取地理位置方法:navigator.geolocation.watchPosition
對於使用移動設備的用戶來說,位置並不是固定的,W3C 當然也考慮到了這一點,watchPosition 是一個專門用來處理這一情況的方法,watchPosition 被調用后,瀏覽器會跟蹤設備的位置,每一次位置的變化,watchPosition 中的代碼都將會被執行。對於致力於移動設備 web 開發的同學來說,這個方法是及其重要的,它也許將會改變 web 移動客戶端的格局。
使用navigator.geolocation.clearWatch既可以清除navigator.geolocation.watchPosition
的監控事件。