Géolocalisation avec HTML5 et JavaScript. L'intégration avec Google Maps

Nouveaux produits introduits avec HTML5 sont nombreuses et certaines particulièrement intéressantes. Parmi ces se distingue, sans aucun doute, le soutien à la géolocalisation, qui peut détecter automatiquement l'emplacement géographique de l'utilisateur via le navigateur.

En utilisant la géolocalisation, en fait, avec le soutien pour les navigateurs HTML5 sont capables de suivre la localisation de l'utilisateur en utilisant l'adresse IP attribuée par votre connexion FAI, la proximité de la communication cellulaire (pour une connexion mobile) ou via le ' Antenne GPS peuvent être intégrés dans le dispositif. La détection de position georafica, bien sûr, n'a lieu qu'après autorisation explicite de la personne concernée (qui sera informé de la demande de la page Web pour faire le suivi de la position, une demande qui sera capable de consentir ou non).

L'emplacement retourné par le navigateur est exprimé par ses coordonnées (latitude et longitude) qui peut ensuite être utilisé par JavaScript. La nouvelle API de géolocalisation est basée sur une nouvelle propriété de l'objet navigator: navigator.geolocation.

Afin de vérifier si le navigateur offre un soutien pour ces nouvelles API pour HTML5 est suffisante, donc subordonnée à faire un appel comme ceci:

 if (navigator.geolocation) {



  



 / / Browser prêt avec le support de HTML5 géolocalisation







 Else {}



  



 / / Pas de support pour la géolocalisation







 }

Voici un peu de code JavaScript simple (à insérer dans l'entête de la page) pour la détection des coordonnées géographiques de l'utilisateur:

 if (navigator.geolocation) {



  



 navigator.geolocation.getCurrentPosition (mia_posizione);







 Else {}



  



 alert ('La géo-localisation n'est pas possible »);







 }









 Fonction mia_posizione () {



  



 var lat = position.coords.latitude;



  



 var lon = position.coords.longitude;



  



 document.getElementById ('location') innerHTML = 'Votre position: «. + lat +', '+ lon;

  





 }

Dans le corps de la page, non seulement d'insérer un élément avec l'id «position» dans lequel les coordonnées de l'utilisateur sera écrit.

Pour voir un exemple de travail , cliquez ici .

Fonction GetCurrentPosition ()

Comme vous pouvez voir si votre navigateur supporte les veines GetCurrentPosition géolocalisation appelé la fonction () qui, dans notre exemple, un argument est passé comme le rappel en cas de succès.
En fait, cela fonctionne admet trois paramètres:

• rappel en cas de succès;
• Rappel sur l'échec;
• options:
  • enableHighAccuracy: vrai ou faux, est de demander à l'appareil pour envoyer l'emplacement avec le plus haut niveau de précision (attivamndo, par exemple, le GPS);
  • timeout: durée maximale d'attente pour la détection de la position (en millisecondes);
  • maximumAge: âge maximum, après quoi la détection doit être effectuée suivi de position Nuvo;

Voici un exemple d'utilisation de GetCurrentPosition () avec les trois paramètres acceptés:

 



 navigator.geolocation.getCurrentPosition (



  



 success_callback, error_callback, {enableHighAccuracy: false});

 

• <<
• 1
• 2
• 3
• >>