Cordova - Geolocalizzazione

La geolocalizzazione viene utilizzata per ottenere informazioni sulla latitudine e longitudine del dispositivo.

Passaggio 1: installazione del plug-in

Possiamo installare questo plugin digitando il seguente codice in command prompt finestra.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation

Passaggio 2: aggiungere pulsanti

In questo tutorial ti mostreremo come ottenere la posizione corrente e come osservare i cambiamenti. Dobbiamo prima creare pulsanti che chiamino queste funzioni.

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

Passaggio 3: aggiungere ascoltatori di eventi

Ora vogliamo aggiungere listener di eventi quando il dispositivo è pronto. Aggiungeremo il codice di esempio di seguito aonDeviceReady funzione in index.js.

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

Passaggio 3: creare funzioni

È necessario creare due funzioni per due listener di eventi. Uno verrà utilizzato per ottenere la posizione corrente e l'altro per osservare la posizione.

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');
   }
}

Nell'esempio sopra stiamo usando due metodi: getCurrentPosition e watchPosition. Entrambe le funzioni utilizzano tre parametri. Una volta cliccatoCURRENT POSITION pulsante, l'avviso mostrerà i valori di geolocalizzazione.

Se clicchiamo WATCH POSITIONpulsante, lo stesso avviso verrà attivato ogni tre secondi. In questo modo possiamo monitorare i cambiamenti di movimento del dispositivo dell'utente.

NOTA

Questo plugin utilizza il GPS. A volte non può restituire i valori in tempo e la richiesta restituirà un errore di timeout. Questo è il motivo per cui abbiamo specificatoenableHighAccuracy: true e maximumAge: 3600000.Ciò significa che se una richiesta non viene completata in tempo, utilizzeremo invece l'ultimo valore noto. Nel nostro esempio, stiamo impostando maximumAge su 3600000 millisecondi.