Cordova地理位置


地理位置是用於獲取有關裝置的經緯度資訊。

第1步 - 安裝外掛

我們可以通過輸入以下程式碼,命令提示字元視窗安裝這個外掛。
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation

第2步 - 新增按鈕

在本教學中,我們將學習如何獲得當前位置以及如何監視位置改變。我們首先需要建立呼叫這些功能的按鈕。

<button id = "getPosition">CURRENT POSITION</button>
<button id = "watchPosition">WATCH POSITION</button>

第3步 - 新增事件監聽器

現在,我們要新增事件偵聽器在裝置已準備就緒時。我們將在index.js新增程式碼範例下面程式碼到 onDeviceReady 函式。

document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click", watchPosition);	

第3步 - 建立函式

兩個函式需要建立用於兩個事件偵聽器。一個將被用於獲取當前位置,另一個用於監視位置。

function getPosition() {

   var options = {
      enableHighAccuracy: true,
      maximumAge: 3600000
   }
	
   var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);

   function onSuccess(position) {

      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
   }
}

function watchPosition() {

   var options = {
      maximumAge: 3600000,
      timeout: 3000,
      enableHighAccuracy: true,
   }

   var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

   function onSuccess(position) {

      alert('Latitude: '          + position.coords.latitude          + '\n' +
         'Longitude: '         + position.coords.longitude         + '\n' +
         'Altitude: '          + position.coords.altitude          + '\n' +
         'Accuracy: '          + position.coords.accuracy          + '\n' +
         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
         'Heading: '           + position.coords.heading           + '\n' +
         'Speed: '             + position.coords.speed             + '\n' +
         'Timestamp: '         + position.timestamp                + '\n');
   };

   function onError(error) {
      alert('code: '    + error.code    + '\n' +'message: ' + error.message + '\n');
   }

} 

在上面的例子,我們使用兩種方法 ? getCurrentPosition 和 watchPosition。這兩個函式使用三個引數。當我們點選CURRENT POSITION按鈕,彈出顯示地理位置值。

如果我們點選 WATCH POSITION按鈕,相同的彈出提示將每三秒鐘觸發一次。這樣我們就可以跟蹤使用者的裝置的運動的變化。

這個外掛是使用GPS。有時不能按時返回值,並請求將返回超時錯誤。這就是為什麼我們指定enableHighAccuracy:true和maximumAge: 3600000. 這意味著,如果請求不按時完成後,我們將使用最後已知值來代替。在我們的例子中,最大值設定為3600000毫秒。