Cordova - Géolocalisation

La géolocalisation est utilisée pour obtenir des informations sur la latitude et la longitude de l'appareil.

Étape 1 - Installation du plug-in

Nous pouvons installer ce plugin en tapant le code suivant pour command prompt la fenêtre.

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

Étape 2 - Ajouter des boutons

Dans ce didacticiel, nous allons vous montrer comment obtenir la position actuelle et comment surveiller les changements. Nous devons d'abord créer des boutons qui appelleront ces fonctions.

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

Étape 3 - Ajouter des écouteurs d'événements

Maintenant, nous voulons ajouter des écouteurs d'événements lorsque l'appareil est prêt. Nous ajouterons l'exemple de code ci-dessous àonDeviceReady fonction dans index.js.

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

Étape 3 - Créer des fonctions

Deux fonctions doivent être créées pour deux écouteurs d'événements. L'un sera utilisé pour obtenir la position actuelle et l'autre pour regarder la position.

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

Dans l'exemple ci-dessus, nous utilisons deux méthodes - getCurrentPosition et watchPosition. Les deux fonctions utilisent trois paramètres. Une fois que nous cliquonsCURRENT POSITION bouton, l'alerte affichera les valeurs de géolocalisation.

Si nous cliquons WATCH POSITIONbouton, la même alerte sera déclenchée toutes les trois secondes. De cette façon, nous pouvons suivre les changements de mouvement de l'appareil de l'utilisateur.

REMARQUE

Ce plugin utilise le GPS. Parfois, il ne peut pas renvoyer les valeurs à temps et la demande renverra une erreur de délai d'expiration. C'est pourquoi nous avons spécifiéenableHighAccuracy: true et maximumAge: 3600000.Cela signifie que si une demande n'est pas terminée à temps, nous utiliserons la dernière valeur connue à la place. Dans notre exemple, nous définissons maximumAge sur 3600000 millisecondes.