L'API geolocalisation en HTML5

Par debray jerome (Dji programmation web2 et design) (Blog)
 

Une des nouveautés introduites par HTML5 est la géolocalisation utilisable via une API d'un navigateur. Cela permet aux pages web d'interroger le navigateur sur la position géographique de l'utilisateur.

L'API de base permet d'obtenir les coordonnées en latitude et en longitude ainsi que l'altitude.

Celles-ci peuvent alors être exploitées par le biais d'une carte (de type Google Map).

13 commentaires

       Version PDF (Miroir)   Version hors-ligne (Miroir)

                    

I. Compatibilité

II. Utilisation de l'API

	if(navigator.geolocation){
	...
	}
			

	if(navigator.geolocation){
	    navigator.geolocation.getCurrentPosition(function(position){
	        var latitude = position.coords.latitude;
	        var longitude = position.coords.longitude;
	        var altitude = position.coords.altitude;
	        document.getElementById('geolocation').innerHTML = 'latitude : ' + latitude + '<br />' + 'longitude : ' + longitude + '<br />' + 'altitude : ' + altitude + '<br />';
	    });
	}
			

	navigator.geolocation.getCurrentPosition(
	    successfunction, errorfunction, {options}
	);
			

III. Les options

• enableHighAccuracy : (true ou false), position précise ou non ;
• timeout : (type long), temps de réponse, durée avant renvoi vers la fonction d'erreur ;
• maximumAge : (type long ou Infinity) durée de la mise en cache de la position courante, si maximumAge:0 alors la position ne viendra jamais du cache, elle sera toujours renouvelée.

			
	function errorfunction(error){
	    switch(error.code) {
	        case error.TIMEOUT:
	            //faire quelque chose pour la gestion du timeout
	        break;
	    }
	}
	function successfunction(position){
	    if (position.timestamp < freshness_threshold && position.coords.accuracy < accuracy_threshold) {
	        // la position est relativement fraiche et précise.
	    } else {
	        // la position est ancienne ou imprécise.
	    }
	}
	
	navigator.geolocation.getCurrentPosition(
	    successfunction, errorfunction, {maximumAge:5000, timeout:2000}
	);
			

IV. L'objet position

• coords, retourne les coordonnées ainsi que la précision (entre autres) ;
• timestamp, représente le moment où la position a été acquise.

• latitude, la latitude de la position ;
• longitude, la longitude de la position ;
• altitude, l'altitude de la position ;
• accuracy, niveau de précision de la longitude et de la latitude (en mètre) ;
• altitudeAccuracy: niveau de précision de l'altitude (en mètre) ;
• heading, donne la position en degré par rapport au nord ;
• latitude, affiche la vitesse actuelle de déplacement de la position (en mètre).

V. Fonction d'error : PositionError

• UNKNOW_ERROR, erreur inconnue ;
• PERMISSION_DENIED, l'application n'a pas l'autorisation d'utiliser l'API Geolocalisation ;
• POSITION_UNVAILABLE, la position n'existe pas ;
• TIMEOUT, erreur de timeout ;
• code, renvoi le code d'erreur courant ;
• message, renvoi le message.

	function errorfunction(error){
	    switch(error.code) {
	        case error.TIMEOUT:
	            //faire quelque chose pour la gestion du timeout
	        break;
	        case error.PERMISSION_DENIED:
	            alert(error.message);
	        break;
	    }
	}
	function successfunction(position){
	...
	}
	
	navigator.geolocation.getCurrentPosition(
	    successfunction, errorfunction, {maximumAge:5000, timeout:2000}
	);
			

VI. Les fonctions watchPosition() et clearWatch()

	var watchId = navigator.geolocation.watchPosition(
	    successfunction, errorfunction, {maximumAge:5000, timeout:2000}
	);
	
	function cancelButton(){
	    clearWatch(watchId);
	}
			

VII. Exemple concret avec Google Map

VIII. Conclusion

IX. Remerciements

13 commentaires