## Geolocation API（地理位置） **1、地理位置（Geolocation API）** Geolocation接口用于獲取用戶的地理位置。它使用的方法基于GPS或者其他機制（比如IP地址、Wifi熱點、手機基站等）。 **1.1 檢測地理位置是否可用** ``` if('geolocation' in navigator){ //地理位置可用 }else{ //地理位置不可用 } ``` **1.2 獲取當前定位** getCurrentPosition()函數可用來獲取設備當前位置： ``` navigator.geolocation.getCurrentPosition(success,error,option); ``` 參數說明： - success：成功得到位置信息時的回調函數，使用Position對象作為唯一的參數 - error：獲取位置信息失敗時的回調函數，使用PositionError對象作為唯一的參數，可選項 - options：一個可選的PositionOptions對象，可選項 注意：使用它需要得到用戶的授權，瀏覽器會跳出一個對話框，詢問用戶是否許可當前頁面獲取他的地理位置。如果同意授權，就會調用success；如果用戶拒絕授權，則會拋出一個錯誤，調用error。 **1.2.1 授權成功** ``` function success(position){ //成功 } ``` `position`參數是一個Position對象。其有兩個屬性：`timestamp`和`coords`。`timestamp`屬性是一個時間戳，返回獲得位置信息的具體時間。`coords`屬性指向一個對象，包含了用戶的位置信息，主要是以下幾個值： - coords.latitude：緯度 - coords.longitude：經度 - coords.accuracy：精度 - coords.altitude：海拔 - coords.altitudeAccuracy：海拔精度（單位：米） - coords.heading：以360度表示的方向 - coords.speed：每秒的速度（單位：米） **1.2.2 授權失敗** ``` function error(PositionError){ //用戶拒絕授權 } ``` PositionError 接口表示當定位設備位置時發生錯誤的原因。 `PositionError.code` 返回無符號的、簡短的錯誤碼： - 1 相當于PERMISSION_DENIED 地理位置信息的獲取失敗，因為該頁面沒有獲取地理位置信息的權限。 - 2 相當于POSITION_UNAVAILABLE 地理位置獲取失敗，因為至少有一個內部位置源返回一個內部錯誤。 - 3 相當于TIMEOUT 獲取地理位置超時，通過定義PositionOptions.timeout 來設置獲取地理位置的超時時長。 **1.2.3 options參數** 用來設置定位行為 ``` var option = { enableHighAccuracy : true, timeout : Infinity, maximumAge : 0 }; ``` 參數說明： - `enableHighAccuracy`：如果設為true，就要求客戶端提供更精確的位置信息，這會導致更長的定位時間和更大的耗電，默認設為false。 - `Timeout`：等待客戶端做出回應的最大毫秒數，默認值為Infinity（無限）。 - `maximumAge`：客戶端可以使用緩存數據的最大毫秒數。如果設為0，客戶端不讀取緩存；如果設為infinity，客戶端只讀取緩存。 **1.3 監視定位** `watchPosition()`方法可以用來監聽用戶位置的持續改變。它與 `getCurrentPosition() `接受相同的參數，但回調函數會被調用多次。錯誤回調函數與 getCurrentPosition() 中一樣是可選的，也會被多次調用。 ``` var watchID = navigator.geolocation.watchPosition(success,error, options); ``` 一旦用戶位置發生變化，就會調用回調函數success。這個回調函數的事件對象，也包含timestamp和coords屬性。 `watchPosition()` 函數會返回一個 ID，唯一地標記該位置監視器。您可以將這個 ID 傳給` clearWatch()` 函數來停止監視用戶位置。 ``` navigator.geolocation.clearWatch(watchID); ``` **1.4 完整例子** ``` <div id="myLocation"></div> var ml=document.getElementById("myLocation"); function getUserLocation(){ if("geolocation" in navigator){ var options={ enableHighAccuracy: true, maximumAge: 30000, timeout: 27000 }; navigator.geolocation.getCurrentPosition(success,error,options); var watchID = navigator.geolocation.watchPosition(success,error, options); }else{ ml.innerHTML="您的瀏覽器不支持定位！"; } } function success(position){ var coords=position.coords; var lat=coords.latitude; var lng=coords.longitude; ml.innerHTML="您當前所在的位置：經度"+lat+";緯度："+lng; //只有firefox支持address屬性 if(typeof position.address !== "undefined"){ var country = position.address.country; var province = position.address.region; var city = position.address.city; ml.innerHTML +="您的地址" + country + province + city; } } function error(error){ switch(error.code){ case error.TIMEOUT: ml.innerHTML="連接超時，請重試";break; case error.PERMISSION_DENIED: ml.innerHTML="您拒絕了使用位置共享服務，查詢已取消";break; case error.POSITION_UNAVAILABLE: ml.innerHTML="親，非常抱歉，我們暫時無法為您提供位置服務";break; } ml.style.color="red"; } window.onload=function(){ getUserLocation(); } ```