HTML5 : API géolocalisation

Votre positionnement (latitude et longitude) doit en principe s'afficher dans la boîte ci-dessous à condition bien sûr que votre navigateur autorise la géolocalisation.

Attention le navigateur Chrome à partir de la version 50 ne supporte plus l’API HTML5 Geolocalisation dans un contexte non sécurisé. En clair, pour qu’une page web qui s’éxécute sous Chrome puisse être en mesure de tirer profit de l’API Geolocalisation, doit être appelée avec utilisation du protocole HTTPS !
Donc cette page ne fonctionne pas avec Chrome puisque le protocole est HTTP.
Maintenant il vous suffit de tester avec un autre navigateur ou de produire une page web en récupérant le code ci-dessous et de la tester en local !

Le code de la page (extraits)

... <div style = "width : 50% ; height : 100px ; border : 1px solid black ; text-align : center ; font-size : 14pt;"></div> ... <script> if(navigator.geolocation) // si navigateur supporte cette API { navigator.geolocation.getCurrentPosition(flocalisation) ; // appel de la fonction flocalisation dès que la localisation est réussie } else alert('votre navigateur ne supporte pas la géolocalisation'); function flocalisation(position) { var infoposition = 'ma position : ' + '<br>'; infoposition += 'latitude : ' + position.coords.latitude + '<br>' ; infoposition += 'longitude : ' + position.coords.longitude + '<br>'; document.querySelector('div').innerHTML = infoposition ; } // fin fonction </script> ...

A propos de la géolocalisation

L'une des fonctionnalités nouvelles apportée par HTML5 est la possibilité de localiser l'internaute en utilisant une nouvelle API JavaScript.

Commentaire du code JavaScript

L'objet navigator de JavaScript possède désormais le sous objet geolocation.
Ce sous objet dispose entre autres de la méthode getCurrentPosition.
Cette méthode nécessite un paramètre obligatoire qui est en fait l'appel d'une fonction lorsque la localisation a réussi.
Ainsi dans l'exemple il y a appel de la fonction flocalisation.
La fonction de localisation a besoin d'un paramètre de type position. Ce paramètre possède entre autres la propriété coords.
La propriété coords comprend deux sous propriétés : latitude et longitude.
Dans la variable infoposition une phrase explicite qui devient le contenu de la boîte DIV est construite.


Retour menu