使用HTML5 Geoloatio API獲取地理位置信息

對於HTML5 Geoloatio的介紹我在此很少說，你能夠Google一下。假如你想了解地理定位想關的信息，你也能夠利用Google獲取這些知識，本文主要講HTML5 Geoloatio API的使用。 咱們首先來看一下HTML5 Geolocation在主流瀏覽器中的支持狀況,目前HTML5 Geolocation在如下瀏覽器和操做系統中已被支持：
1＼帶有Gears的Chrome；
2＼Firefox3.5+
3＼Opera10.0+
4＼Safari4.0+
5＼iOS3.0+
6 ＼Android2.0+
有些不支持的HTML5 Geolocation的瀏覽器（如Internet Explorer），能夠經過安裝Gears插件的形式獲取用戶Geolocation。

咱們再來看看HTML5 Geolocation隱私

HTML5 Geolocation規範提供了一套保護用戶隱私的機制，阻礙瀏覽器獲得用戶的明確許可，不然瀏覽不可獲取用戶的當前地理位置數據。

用戶訪問使用HTML5 Geolocation的站點，會觸發隱私保護機制，以下圖在iPhone中的Safari觸發HTML5 Geolocation隱私保護機制

考慮到用戶的隱私，咱們建議在使用HTML5 Geolocation時，必定要告知用戶：
1＼會收集用戶的地理位置數據
2＼爲什麼收集用戶的地理位置數據
3＼位置數據保存的時間
4＼用戶如何更新他的位置數據
5＼如何使用用戶的地理位置數據
在開始使用HTML5 Geolocation API前，咱們必需要檢查瀏覽器是否支持HTML5 Geolocation

HTML 預覽
if (navigator.geolocation) {    
  //do something    
}else{    
  alert('Sorry,your device not support geolocation!');    
}    

繼續探討HTML5 Geolocation API。瀏覽器支持HTML5 Geolocation，咱們如何獲取用戶的當前地理位置信息？

navigator.geolocation.getCurrentPosition(successCallback,errorCallback,positionOptions);  
navigator.geolocation對象有一個方法getCurrentPosition用來獲取用戶當前位置信息，該方法帶有三個參數：
1＼successCallback：成功獲取用戶位置信息後的回調函數
2＼errorCallback：獲取用戶位置信息失敗時的回調函數
3＼positionOptions：可選。獲取用戶位置信息的配置參數

咱們先來看看successCallback

HTML 預覽
var success = function(position){    
            var lat = position.coords.latitude,    
                  lon = position.coords.longitude,    
                  info = document.getElementById('renderData');    
    
            console.log(position);    
    
            if (lat) {    
                info.innerHTML = '';    
    
                info.innerHTML += '<h3>From your geolocation：</h3>' +    
                '<ul><li>Latitude:' +    
                lat +    
                '</li><li>Longitude:' +    
                lon +    
                '</li><li>Region Name:' +    
                geoip_region_name() +    
                '</li><li>City:' +    
                geoip_city() +    
                '</li>' +    
                '<li>Country：' +    
                geoip_country_name() +    
                '</li>' +    
                '<li>Country Code：' +    
                geoip_country_code() +    
                '</li>' +    
                (window.JSON || JSON && JSON.stringify ? '<li>' + JSON.stringify(position) + '</li>' : '') +    
                '</ul>';    
            }    
        };    

successCallback很是簡單，它帶有一個參數，表示已經獲取到的用戶位置數據(positionData)，對象字面量格式。該對象包含兩個屬性coords＼timestamp，
coords屬性中包含了如下7個值：
1＼accuracy：準確度
2＼latitude：緯度
3＼longitude：經度
4＼altitude：海拔高度
5＼altitudeAcuracy：海拔高度的精確度
6＼heading：行進方向
7＼speed：地面的速度
以上七個屬性，若是瀏覽器沒有獲取到它們的值，則返回null。＼
timestamp屬性在實際開發中用處不大。

咱們再看errorCallback

HTML 預覽
var error = function(error){    
                        var info = document.getElementById('renderData');    
    
                        info.innerHTML = '';    
    
                        info.innerHTML = info.innerHTML += '<h3>Error log：</h3>' +    
                        '<ul><li>Error Code:' +    
                        error.code +    
                        '</li><li>Error Message:' +    
                        error.message +    
                        '</li></ul>';    
                    }    

errorCallback和successCallback同樣的簡單。errorCallback也帶有一個參數，表示HTML5 Geolocation返回的錯誤數據，對象字面量格式，它包含如下兩個屬性message＼code
1＼message：錯誤信息
2＼code：錯誤代碼。
錯誤代碼：
0(UNKNOW_ERROR)表示不包括在其它錯誤代碼中的錯誤，這裏能夠須要在message中查找錯誤信息；
1(PERMISSION_DENIED)表示用戶拒絕瀏覽器獲取位置信息的請求
2(POSITION_UNAVALIABLE)表示獲取位置信息失敗
3(TIMEOUT)表示獲取位置信息超是。必須在options中指定了timeout值時纔有可能發生這種錯誤
某些瀏覽器可能沒有message屬性的值，則返回null。

最後咱們看看可選參數positionOptions，positionOptions的數據格式爲JSON。
positionOptions有三個可選的屬性enableHighAcuracy＼timeout＼maximumAge
1＼enableHighAcuracy：布爾值。表示是否啓用高精確度模式，若是啓用這種模式，瀏覽器在獲取位置信息時可能須要耗費更多的時間。
2＼timeout：整數。表示瀏覽須要在指定的時間內獲取位置信息，不然觸發errorCallback。
3＼maximumAge：整數/常量(infinity)。表示瀏覽器從新獲取位置信息的時間間隔。

你是否很疑惑timeout和maximumAge?
timeout很好理解。那maximumAge如何使用呢？

若是瀏覽器沒有在maximumAge設定的時間內更新過位置數據，它就必須從新發起請求。若是將maximumAge設置爲0，則瀏覽器每次請求時都須要從新獲取位置數據，若是設置爲常量infinity則意味着瀏覽器永遠再也不獲取位置數據。

在某些應用開發中，咱們能夠須要實時獲取＼檢測用戶的位置信息，還有HTML5 Geolocation的程序設計師考慮到這一點，爲咱們設計了watchPosition方法，watchPosition就像一個追蹤器同樣實時監視用戶的位置變化，只要用戶的位置發生變化，只要開發者爲HTML5 Geolocation指定了watchPostion，瀏覽器就發觸發successCallback或errorCallback。

navigator.geolocation.watchPosition(successCallback,errorCallback,positionOptions);  
若是你的應用程序中爲HTML5 Geolocation添加了watchPosition，那麼你還應該爲用戶提供關閉這種實時監視位置信息變化的功能，這裏咱們可使用HTML5 Geolocation的clearWatch方法。

HTML5 Geolocation的clearWatch方法接受一個watchPosition ID爲參數。意思就是清除指定的watchPosition。watchPosition ID來自於watchPosition的返回值，每一個watchPosition都會返回一個watchPosition ID。

HTML 預覽
var watchPositionID = navigator.geolocation.watchPosition(successCallback,errorCallback,positionOptions);    
navigator.geolocation.clearWatch(watchPositionID);    

以上就是目前HTML5 Geolocation API中的全部接口的用法。
HTML5 Geolocation能夠幫助開發者獲取用戶的緯度和經度的數據，但沒法獲取到更加詳細的用戶位置數據。好比國家代碼＼城市等等。

其實在實際項目開發中咱們可能須要藉助第三方工具（好比Google Map）來完成產品的需求。好比說幫助用戶自動選擇省份＼地區，幫助用戶作地圖座標定位等等。

在HTML5全球地理位置定位系統演示中使用了GeoIP來獲取用戶的國家代碼＼國家名稱＼省份名稱＼城市名稱。

轉載於猿2048:➞《使用HTML5 Geoloatio API獲取地理位置信息》