HTML5 地理位置

地理定位功能是 HTML5 新增的標(biāo)準(zhǔn)，早期的 HTML 和 JavaScript 沒(méi)有操控硬件和文件的權(quán)限，因?yàn)轫?yè)面交互效果比較簡(jiǎn)單；但是 HTML5 之后網(wǎng)頁(yè)已經(jīng)逐漸應(yīng)用于各種復(fù)雜場(chǎng)景包括移動(dòng)設(shè)備，所以增加了各種與硬件交互的 API 接口，地理位置就是其中之一。

1. 早期的方式

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

2. 檢測(cè)是否支持地理位置

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

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

獲取地理位置之前需要用戶點(diǎn)擊同意按鈕，因?yàn)樵摴δ軤可娴诫[私。

3. 地理位置 API

3.1 獲取當(dāng)前位置

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

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

例如：

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

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

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

3.2 監(jiān)視位置

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

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

3.3 清除監(jiān)視

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

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

4. 定位失敗

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

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

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

4.2 用戶禁用了定位權(quán)限

需要用戶開(kāi)啟定位權(quán)限，error 信息的 message 字段包含 Geolocation permission denied。

4.3 瀏覽器禁止了非安全域的定位請(qǐng)求

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

4.4 定位超時(shí)

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

4.5 定位服務(wù)問(wèn)題

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

5. 總結(jié)

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