Comment utiliser l'API de géolocalisation

En utilisant l'API de géolocalisation, nous pouvons demander au navigateur les coordonnées de position de l'utilisateur

Le navigateur expose unnavigator.geolocationobjet, à travers lequel nous effectuerons toutes les opérations de géolocalisation.

Il n'est disponible que sur les pages servies en HTTPS, à des fins de sécurité, et il est disponible sur tous les navigateurs modernes.

navigator.geolocation

The geolocation object

Puisquewindowest l'objet global auquel nous pouvons accédernavigatorsans préciserwindow.navigator

Lewindow.navigatorpropriété exposée par les navigateurs pointe vers unObjet Navigatorqui est unobjet conteneurcela met à notre disposition de nombreuses API de plate-forme Web.

Legeolocationobject fournit les méthodes suivantes:

  • getCurrentPosition()
  • watchPosition()
  • clearWatch()

Le premier est utilisé pour obtenir les coordonnées de la position actuelle. Lorsque nous appelons cette méthode pour la première fois, le navigateur demande automatiquement à l'utilisateur l'autorisation de nous partager ces informations.

Voici à quoi ressemble cette interface dans Chrome:

The permission screen in Chrome

sur Firefox:

The permission screen in Firefox

et sur Safari:

The permission screen in Safari

Cela ne doit être fait qu'une seule fois par origine. Vous pouvez modifier la décision que vous avez prise et annuler une décision d'autorisation. Voici comment procéder avec Chrome, en cliquant sur l'icône de verrouillage à côté du domaine:

Permission details

Une fois cette autorisation accordée, nous pouvons continuer.

Obtenir la position de l'utilisateur

Commençons par cet exemple de code:

navigator.geolocation.getCurrentPosition(() => {})

Le panneau d'autorisation devrait apparaître. Autorisez la permission.

Remarquez comment j'ai passé un videfonction de flèche, car la fonction veut une fonction de rappel.

Cette fonction est passée unPositionobjet, qui contient l'emplacement réel:

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
})

Cet objet a 2 propriétés:

  • coords, uneCoordinatesobjet
  • timestamp, leHorodatage UNIXquand la position a été récupérée

LeCoordinatesL'objet est livré avec plusieurs propriétés qui définissent l'emplacement:

  • accuracyla précision de la position mesurée, exprimée en mètres
  • altitudela valeur d'altitude mesurée
  • altitudeAccuracyla précision de l'altitude mesurée, exprimée en mètres
  • headingla direction vers laquelle se déplace l'appareil. Exprimé en degrés (0 = Nord, Est = 90, Sud = 180, Ouest = 270)
  • latitudela valeur de latitude mesurée
  • longitudela valeur de longitude mesurée
  • speedla vitesse à laquelle l'appareil se déplace, exprimée en mètres par seconde

En fonction de l'implémentation et de l'appareil, certains d'entre eux serontnull. Par exemple, sur Chrome fonctionnant sur mon MacBook Air, je n'ai que des valeurs pouraccuracy,latitudeetlongitude.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude)
  console.log(position.coords.longitude)
})

Surveiller la position des changements

En plus d'obtenir la position de l'utilisateur une fois, ce que vous pouvez faire en utilisantgetCurrentPosition(), vous pouvez utiliser lewatchPosition()méthode denavigator.geolocationpour enregistrer une fonction de rappel qui sera appelée à chaque changement que l'appareil nous communiquera.

Usage:

navigator.geolocation.watchPosition(position => {
	console.log(position)
})

Bien sûr, le navigateur demandera l'autorisation également avec cette méthode, si elle n'a pas déjà été accordée.

Nous pouvons arrêter de chercher une position en appelant lenavigator.geolocation.clearWatch()méthode, en lui passant leidretourné parwatchPosition():

const id = navigator.geolocation.watchPosition(position => {
	console.log(position)
})

//stop watching after 10 seconds setTimeout(() => { navigator.geolocation.clearWatch(id) }, 10 * 1000)

Si l'utilisateur refuse l'autorisation

Vous vous souvenez de la fenêtre contextuelle d'autorisation que le navigateur affiche lorsque nous appelons l'une des méthodes pour obtenir la position?

Si l'utilisateur nie cela, nous pouvons intercepter ce scénario en ajoutant une fonction de gestion des erreurs, comme deuxième paramètre des méthodesgetCurrentPosition()etwatchPosition().

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
})

L'objet passé au deuxième paramètre contient uncodepropriété pour distinguer les types d'erreur:

  • 1signifie permission refusée
  • 2signifie position indisponible
  • 3signifie timeout

Ajouter plus d'options

Lorsque j'ai parlé d'erreurs précédemment, j'ai mentionné l'erreur de temporisation. La recherche de la position peut prendre un certain temps et nous pouvons définir un temps maximum autorisé pour effectuer l'opération, en option.

Vous pouvez ajouter un délai en ajoutant un troisième paramètre aux méthodesgetCurrentPosition()etwatchPosition(), un objet.

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {

})

À l'intérieur de cet objet, nous pouvons transmettre les propriétés

  • timeoutpour définir le nombre de millisecondes avant la sortie des erreurs de requête
  • maximumAgepour définir l '«âge» maximum de la position mise en cache par le navigateur. Nous n'acceptons pas un plus ancien que le nombre de millisecondes
  • enableHighAccuracyun booléen par défautfalse, nécessite une position avec le plus haut niveau de précision possible (qui peut prendre plus de temps et plus de puissance)

Exemple d'utilisation:

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {
  timeout: 1000,
  maximumAge: 10000,
  enableHighAccuracy: true
})

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de didacticiels sur le navigateur: