Mesurer la longueur d'un tableau MVCArray de LatLng avec computeLength

Bibliothèque géométrie sphérique ( Geometry Library ) exemples et tutoriels en Français

Cartographie et webmapping

Partager ce tutoriel sur les réseaux sociaux
Signaler une erreur dans cet article

Calculer la longueur d'un tableau MVCArray de LatLng avec computeLength

Pour calculer la longueur d'un MVCArray de LatLng, il suffit d'appeler la méthode computeLength() de la bibliothèque Geometry Library. La longueur s'exprime en mètre.

La valeur retournée est un nombre {number}.

var longueur = google.maps.geometry.spherical.computeLength( MVCArray );

Dans cet exemple nous allons calculer la longueur d'un tracé virtuel dont les points (LatLng) sont contenus dans un tableau de type MVCArray et listés ci-dessous :

  • 1 - Tours ( FR ) : Latitude : 47.390912, Longitude : 0.670166
  • 2 - Dakar ( SN ) : Latitude 14.762931, Longitude : -17.339172
  • 3 - Djibouti ( DJ ) : Latitude 11.588847, Longitude : 43.146572
  • 4 - Moscou ( RU ) : Latitude 55.753395, Longitude : 37.626114
  • 5 - Reykjavík ( IS ) : Latitude 64.133529, Longitude : -21.898499
  • 6 - San Francisco ( US ) : Latitude 37.771529, Longitude : -122.427177
/**
 * Dans cet exemple on souhaite mesure la longueur d'un tracé
 * virtuel dont les points (LatLng) sont contenus
 * dans d'un tableau de type MVCArray
 */
var MvcArray = new google.maps.MVCArray(); 
	MvcArray.push( new google.maps.LatLng( 47.390912,    0.670166 ) ); 
	MvcArray.push( new google.maps.LatLng( 14.762931,  -17.339172 ) ); 
	MvcArray.push( new google.maps.LatLng( 11.588847,   43.146572 ) ); 
	MvcArray.push( new google.maps.LatLng( 55.753395,   37.626114 ) ); 
	MvcArray.push( new google.maps.LatLng( 64.133529,  -21.898499 ) ); 
	MvcArray.push( new google.maps.LatLng( 37.771529, -122.427177 ) ); 
/**
 * Le résultat est affecté à la variable longueur
 */
var longueur = google.maps.geometry.spherical.computeLength(MvcArray);

Attention : n'oubliez pas d'ajouter la bibliothèque geometry lorsque vous appelez le script de l'API Google Maps v3 :

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>

Carte avec calcul de la longueur d'un MVCArray de LatLng avec computeLength

La carte affichée ci-dessus est donnée uniquement pour illustrer le tracé virtuel que pourraient générer les LatLng contenues dans le MVCArray.
La longueur du chemin passant par ces 6 points mesure mètres

Exemple de code pour mesurer la longueur d'un MVCArray de LatLng avec computeLength

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<meta charset="UTF-8" />
	<title>Titre de votre page</title>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
	<script type="text/javascript">
		function initialisation(){
			var MvcArray = new google.maps.MVCArray(); 
				MvcArray.push(new google.maps.LatLng(47.390912,0.670166)); 
				MvcArray.push(new google.maps.LatLng(14.762931,-17.339172)); 
				MvcArray.push(new google.maps.LatLng(11.588847,43.146572)); 
				MvcArray.push(new google.maps.LatLng(55.753395,37.626114)); 
				MvcArray.push(new google.maps.LatLng(64.133529,-21.898499)); 
				MvcArray.push(new google.maps.LatLng(37.771529,-122.427177));
			var longueur = google.maps.geometry.spherical.computeLength(MvcArray);
			document.getElementById('info').innerHTML = "Longeur du chemin ou tracé passant par ces 6 points : "+longueur+" mètres";
		}
		google.maps.event.addDomListener( window, "load", initialisation );
	</script>
</head>
<body>
	<div id="info"></div>
	<noscript>
		<p>Attention : </p>
		<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
		<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
		<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
	</noscript>
</body>
</html>