HTML5 地理位置

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

1. 早期的方式

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

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

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

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

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

3. 地理位置 API

3.1 獲取當前位置

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

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

例如：

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

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

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

3.2 監視位置

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

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

3.3 清除監視

使用 clearWatch 函數刪除 watchPosition 函數注冊的監聽器：

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

4. 定位失敗

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

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

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

4.2 用戶禁用了定位權限

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

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

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

4.4 定位超時

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

4.5 定位服務問題

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

5. 總結

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