Logo JavaScript

Géolocalisation de votre visiteur avec HTML 5 et JS

Flattr this!

On va jouer un peu avec de la géolocalisation via HTML 5 et JS. On va faire simple, on attaque direct avec un bout de code :

if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function (position) {
		console.log("position", position)
	});
}

Assez simple quand même là, non ?

Explications

Toujours vérifier si on peut faire ce qu'on va faire avant de le faire. Qualité, efficacité, compatibilité (surtout).

Puis on demande au navigateur de nous envoyer les infos auxquelles il a accès. Cela peut nécessiter une autorisation de la part de l'utilisateur. Tout est envoyé via un objet en paramètre dans une fonction de callback que j'ai créé en anonyme ici.

Vous obtiendrez un objet Position qui contient un timestamp (pratique pour le temps réel) et un objet Coordinates nommé coords.

Ce dernier objet contient les propriétés suivantes :

  • accuracy : précision estimée sur la latitude et la longitude (en mètre). Toujours pratique quand vous lancerez un missile pour savoir si vous allez taper au bon endroit :p ;
  • altitude : l'altitude ;
  • altitudeAccuracy : la précision estimée pour l'altitude(en mètre) ;
  • heading : la position en degré par rapport au Nord
  • latitude : la latitude ;
  • longitude : la longitude (je viens de faire deux traductions de fous là) ;
  • speed : la vitesse estimée en mètre par seconde. Vaut null si elle ne peut être estimée.

Pour enrichir un peu les choses

La fonction getCurrentPosition peut recevoir 3 paramètres. Dans l'ordre :

  • une fonction de callback en cas de succès ;
  • une fonction de callback en cas d'échec ;
  • des options complémentaires dans un unique objet JSON :
    • timeout : correspond à la durée en millisecondes avant l'appel aux fonctions de callback ;
    • maximumAge : correspond au nombre de millisecondes maximum  depuis le dernier relevé que vous souhaitez autorisé. Si vous le placez à 60000, c'est que vous demandez que le relevé soit vieux au maximum de 10 minutes. Si le dernier relevé est plus ancien, il en fera alors un nouveau. Mettre 0 pour forcer un relevé ;
    • enableHighAccuracy : permet d'activer ou non une demande de plus grande précision. Peut résulter en une différence de rapidité de résultat et pour les terminaux sur batterie (portables, smartphones), l'user un peu plus qu'une demande moins précise.

Et pour ceux qui ont vraiment envie de lire : la spec du W3C.

Compatibilité

  • Firefox 3.6 + ;
  • Thunderbird 3.1+ ;
  • Fennec 1.0 + ;
  • Chrome 5+ ;
  • IE 9+ ;
  • Opera 10.60+ ;
  • Android 1.6 +
  • Safari 5.0 + ;
  • iOS 3.0 +;
  • BlackberryOS 6+.

Plutôt complète la liste non ? 😉

Conclusion

Il y a d'autres trucs avec lesquels vous pouvez jouer mais déjà rien qu'avec ça, j'ai envie de vous dire : Elle est pas belle la vie ?!

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans JavaScript, avec comme mot(s)-clef(s) , , , , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • Alarma

    Merci de partager l’ info !!!

    • http://www.mathieurobin.com/ Mathieu

      De rien !

Articles liés