Web前端開發(fā)第21章：地理定位1本章主要內(nèi)容常見地理定位方式使用HTML5實現(xiàn)地理定位案例：使用百度地圖展示當前位置案例：使用百度地圖展示運動軌跡21.常見地理定位方式IP定位IP定位是過去很長一段時間獲取用戶位置信息的常用方式，其實現(xiàn)原理是：自動查找用戶的IP地址，然后檢索其注冊的物理地址。優(yōu)點：任何地方都可用、在服務器端處理缺點：不準確（經(jīng)常出錯，一般只能精確到城市級別）、運算代價高（在服務器端處理）*如果用戶的IP地址是ISP（互聯(lián)網(wǎng)服務提供商）提供的，則其位置往往就由服務提供商的物理地址決定，因此其定位信息可能距用戶位置還有很長一段距離。31.常見地理定位方式GPS定位GPS（GlobalPositioningSystem）全球定位系統(tǒng)，它通過收集運行在地球周圍的多個GPS衛(wèi)星信號實現(xiàn)地理定位。優(yōu)點：準確性高缺點：響應時間可能較長、耗電41.常見地理定位方式Wi-Fi定位Wi-Fi定位通常是指使用一個或多個Wi-Fi接入點完成三角定位，其通過計算用戶當前位置與已知的多個Wi-Fi接入點的距離，從而實現(xiàn)地理定位。優(yōu)點：準確、可在室內(nèi)使用、快速缺點：僅適合靜態(tài)定位（用戶位置保持不變）、定位效果不是很好（Wi-Fi接入點少的地區(qū)）51.常見地理定位方式手機基站定位基于手機的地理定位是通過用戶到電信運營商基站的三角距離確定的，基站越多定位就越準確。優(yōu)點：準確（依據(jù)電信運行商基站數(shù)量而定）、可在室內(nèi)使用、快速缺點：如果你的位置很偏避，附近只有一個基站，則定位的精度就會出現(xiàn)很大的偏差62.使用HTML5實現(xiàn)地理定位瀏覽器支持性檢查Geolocation是HTML5規(guī)范的一部分，目前可在幾乎所有的主流瀏覽器中使用GeolocationAPI實現(xiàn)地理定位。W3C組織為Geolocation制定的接口定義：72.1瀏覽器支持性檢查2.使用HTML5實現(xiàn)地理定位瀏覽器支持性檢查通過下面的代碼檢查瀏覽器支持性：82.1瀏覽器支持性檢查2.使用HTML5實現(xiàn)地理定位位置請求Geolocation目前只有兩種類型的位置請求：單次定位請求以及重復位置更新請求。92.2位置請求2.使用HTML5實現(xiàn)地理定位單次定位請求單次定位請求只請求用戶地理位置信息一次，使用getCurrentPosition方法可以得到用戶地理位置信息，其調(diào)用方法為：該方法的三個參數(shù)為onSuccess、onError、options。102.2位置請求2.使用HTML5實現(xiàn)地理定位onSuccess：瀏覽器成功獲得地理定位信息時調(diào)用的函數(shù)，因為獲取定位信息時可能需要較長的時間完成，為防止在檢索位置時瀏覽器被鎖定，或者被暫停（需等待用戶同意后才能獲得地理位置信息），所以這個函數(shù)參數(shù)十分重要，它是得到定位信息并進行處理的地方。瀏覽器獲取地理位置成功時調(diào)用函數(shù)代碼如下所示：在獲取地理位置信息成功時，執(zhí)行的回調(diào)函數(shù)中，用到了參數(shù)position，它代表一個position對象，通過訪問position對象的屬性即可得到地理位置信息。112.2位置請求2.使用HTML5實現(xiàn)地理定位position屬性latitude：當前地理位置的緯度。longitude：當前地理位置的經(jīng)度。altitude：當前地理位置的海拔高度，未獲取到時為null。accuracy：獲取到的緯度/經(jīng)度的精度，以米為單位。altitudeAccuracy：獲取到的海拔高度精度，以米為單位，未獲取到時為null。heading：設備的前進方向，用面朝正北方向的順時針旋轉(zhuǎn)角度表示，未獲取到時為null。speed：設備的前進速度，以m/s為單位，未獲取到時為null。timestamp：獲取地理位置時的時間。122.2位置請求2.使用HTML5實現(xiàn)地理定位position主要包含坐標（coords特性）和一個獲取位置信息的時間戳，在實際應用中并不一定需要時間戳，重要的位置數(shù)據(jù)都包含在了coords屬性中。132.2位置請求2.使用HTML5實現(xiàn)地理定位onError：因為位置計算服務很可能出錯，所以對于HTML5Geolocation應用程序來說錯誤處理非常重要。HTML5GeolocationAPI定義了所有需要處理的錯誤情況的錯誤編號。錯誤編號設置在錯誤對象中，錯誤對象作為code參數(shù)傳遞給錯誤處理程序。142.2位置請求2.使用HTML5實現(xiàn)地理定位錯誤編號PERMISSION_DENIED（錯誤編號1）：用戶選擇拒絕瀏覽器獲取其位置。POSITION_UNAVAILABLE（錯誤編號2）：嘗試獲取用戶位置數(shù)據(jù)失敗。TIMEOUT（錯誤編號3）：嘗試確定用戶位置超時。處理地理定位錯誤信息代碼如下所示：152.2位置請求2.使用HTML5實現(xiàn)地理定位options：請求選項options是可選參數(shù)，用來調(diào)整HTML5Geolocation服務的數(shù)據(jù)收集方式。其聲明方式如下所示：options主要由enableHighAccuracy、timeout和maximumAge三個可選參數(shù)組成，將這三個參數(shù)傳遞給HTML5Geolocation服務以調(diào)整數(shù)據(jù)收集方式。三個參數(shù)可以使用JSON對象傳遞，這樣便于添加到HTML5Geolocation請求應用中。162.2位置請求2.使用HTML5實現(xiàn)地理定位options參數(shù)enableHighAccuracy：布爾值，如果選擇啟用，則將通知瀏覽器啟用HTML5Geolocation服務的高精確度模式，默認值為false。timeout：單位為ms，告訴瀏覽器計算當前位置所允許的最長時間，如果在限制時間內(nèi)未完成定位，就會調(diào)用錯誤處理程序，默認值為Infinity，即無限制一直執(zhí)行。maximumAge：數(shù)值，單位為ms，表示瀏覽器重新計算位置的時間間隔，默認值為0，這意味著瀏覽器每次請求時必須立即重新計算位置。172.2位置請求18現(xiàn)場演示：案例21-01：展示position屬性信息2.使用HTML5實現(xiàn)地理定位重復位置更新請求使用watchPosition方法可以持續(xù)獲取用戶的當前地理位置信息，它會定期的自動獲取，其調(diào)用方法為：該方法的三個參數(shù)均與getCurrentPosition（單次定位請求）方法的參數(shù)說明和使用方法相同。只要用戶位置發(fā)生變化，Geolocation服務就會調(diào)用onSuccess函數(shù)，它的效果就像是程序在監(jiān)視用戶的位置，并在其發(fā)生變化時及時通知用戶一樣。192.2位置請求2.使用HTML5實現(xiàn)地理定位停止獲取位置信息使用clearWatch方法可以停止當前用戶的地理位置信息監(jiān)視，其調(diào)用方法為：該方法的參數(shù)為調(diào)用watchPosition方法監(jiān)視地理位置信息時返回的參數(shù)，比如使用下面的方法監(jiān)視地理位置時，就可以使用上面的方法停止獲取位置信息。202.2位置請求2.使用HTML5實現(xiàn)地理定位隱私保護訪問使用HTML5GeolocationAPI的頁面時，會觸發(fā)隱私保護機制，瀏覽器會彈出框提示是否允許網(wǎng)站獲取你的位置。執(zhí)行HTML5Geolocation代碼時會觸發(fā)這一機制，如果僅僅是添加了HTML5Geolocation代碼并未執(zhí)行，則不會觸發(fā)隱私保護機制。需要特別注意的是如果想要使用HTML5Geolocation的地理定位服務，必須將開發(fā)的頁面通過Web服務器發(fā)布出來，并且發(fā)布之后必須選擇https協(xié)議，才能獲取到用戶的地理位置信息。212.3隱私保護3.案例：使用百度地圖展示當前位置簡介本例通過HTML5GeolocationAPI接口獲取用戶地理位置信息，并通過百度地圖將其當前位置展示出來。描述瀏覽器訪問該頁面，詢問用戶是否授權獲取地理位置，用戶同意后，頁面將加載百度地圖，展示用戶當前地理位置。2223現(xiàn)場演示：案例21-02：使用百度地圖展示當前位置4.案例：使用百度地圖展示運動軌跡簡介本例使用HTML5GeolocationAPI監(jiān)視