HTML5 地理位置

地理定位功能是 HTML5 新增的標準，早期的 HTML 和 JavaScript 沒有操控硬件和文件的權限，因為頁面交互效果比較簡單；但是 HTML5 之后網(wǎng)頁已經逐漸應用于各種復雜場景包括移動設備，所以增加了各種與硬件交互的 API 接口，地理位置就是其中之一。

1. 早期的方式

在 HTML5 之前，獲取地理位置的解決方法是在已知 IP 位置的數(shù)據(jù)庫中查找訪問者的 IP 地址，然后根據(jù) IP 數(shù)據(jù)庫查找到對應的位置。雖然這種方法的準確度遠低于使用 GPS 設備的準確度，但是這些數(shù)據(jù)庫通常能夠定位到訪客大致的地址范圍，這對于許多應用來說是足夠有用的，但是數(shù)據(jù)庫需要經常維護更新。

2. 檢測是否支持地理位置

并非所有的瀏覽器或者硬件設備都支持地理位置功能，所以使用之前需要進行容錯判斷：

if (navigator.geolocation)    {//判斷地理位置是否支持                     
    //業(yè)務代碼
}
else{
    x.innerHTML="該瀏覽器不支持獲取地理位置。";
}

獲取地理位置之前需要用戶點擊同意按鈕，因為該功能牽涉到隱私。

3. 地理位置 API

3.1 獲取當前位置

使用 getCurrentPosition 函數(shù)獲取用戶當前的地理位置，這個函數(shù)有 3 個參數(shù)：

• 第一個參數(shù)設置成功獲取的回調函數(shù)；
• 第二個參數(shù)設置失敗之后的回調函數(shù)；
• 第三個參數(shù)設置一些可選參數(shù)項。

例如：

navigator.geolocation.getCurrentPosition(function(position) {
    //TODO 成功時的處理
    var timestamp = position.timestamp;
    var coords      = position.coords;
}, function(error) {
    //TODO 失敗時的處理
    console.log(error);
}, {
   //參數(shù)設置
})

成功獲取之后的回調函數(shù)中通過參數(shù)傳遞的方式可以拿到地理位置的對象，它是一個
Geoposition對象，上述示例使用 position 變量表示，這個對象包含 2 個屬性：

• timestamp 時間戳
• coords 一個coordinates 類型對象，包括
  • accuracy 精度值
  • altitude 海拔
  • altitudeAccuracy 海拔的精度
  • heading 設備前進方向
  • latitude 經度
  • longitude 緯度
  • speed 前進速度
    第三個參數(shù)是一個 PositionOptions 對象，它包含 3 個用于設置的屬性：
• enableHighAccuracy 是否使用最高精度表示結果
• timeout 設置超時時間
• maximumAge 表示獲取多久的緩存位置

3.2 監(jiān)視位置

使用 watchPosition 函數(shù)可以定時獲取用戶地理位置信息，在用戶設備的地理位置發(fā)生改變的時候自動被調用。這個函數(shù)跟 getCurrentPosition 函數(shù)的使用方式基本一致。

navigator.getlocation.watchPosition(function(pos){
    //業(yè)務代碼
},function(err){
},
{}
)

3.3 清除監(jiān)視

使用 clearWatch 函數(shù)刪除 watchPosition 函數(shù)注冊的監(jiān)聽器：

var watch = navigator.geolocation.watchPosition(show_map, handle_error, {enableHighAccuracy: true,timeoout: 175000, maximumAge: 75000})
clearWatch(watch); //清除監(jiān)視

4. 定位失敗

由于獲取地理位置功能依賴硬件信號，例如 GPS 信號、WiFi 信號等等，所以有時可能會出現(xiàn)獲取不到位置的情況，在這里做了一下總結：

4.1 瀏覽器不支持原生定位接口

有些舊版本的瀏覽器不支持 HTML5，如 IE 較低版本的瀏覽器。這時調用定位接口會出現(xiàn) error 信息，message 字段包含 Browser not Support html5 geolocation 信息。

4.2 用戶禁用了定位權限

需要用戶開啟定位權限，error 信息的 message 字段包含 Geolocation permission denied。

4.3 瀏覽器禁止了非安全域的定位請求

比如 Chrome、IOS 10 已經陸續(xù)禁止，需要升級站點到 HTTPS，error 信息的 message 字段包含Geolocation permission denied信息。注意: Chrome 不會禁止 localhost 域名 HTTP 協(xié)議下的定位

4.4 定位超時

由于信號問題有時會出現(xiàn)超時問題，可以適當增加超時屬性的設定值以減少這一現(xiàn)象。某個別瀏覽器本身對定位接口的友好程度較弱，也會超時返回失敗，error 信息的 message 字段包含 Geolocation time out 信息。

4.5 定位服務問題

Chrome、Firefox 以及一些套殼瀏覽器接入的定位服務在國外，有較大的限制，也會造成定位失敗，且失敗率較高。

5. 總結

本章介紹了移動開發(fā)的利器-地理位置功能，通過這個功能可以使用 HTML 直接跟移動設備硬件交互，很大程度上從豐富了網(wǎng)頁的交互方式，不過需要用戶授權之后才能使用；地理位置相關的函數(shù)只有 3 個，使用時需要考慮瀏覽器兼容性