mercredi 03 mai 2017 20:25

Mesurer la distance entre 2 points

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

Cartographie et webmapping

Calculer la distance entre deux points avec computeDistanceBetween

La distance entre deux points est la longueur du plus court chemin les séparant. Ce chemin le plus court est appelé géodésique. Sur une sphère, toutes les géodésiques sont des segments de grand cercle.

Pour calculer la distance, en mètres, séparant deux points avec l'API Google Maps Javascript, on utilise la méthode computeDistanceBetween( depart, arrivee ), en lui passant deux paramètres :

  • depart : est un objet LatLng avec les coordonnées du point de départ A,
  • arrivee : est un objet LatLng avec les coordonnées du point d'arrivée B.
La valeur retournée est un nombre représentant la distance séparant les deux points exprimée en mètres.

var distance = google.maps.geometry.spherical.computeDistanceBetween( depart, arrivee )

Exemple :

/**
 * Dans cet exemple on souhaite calculer la distance séparant 2 points :
 * Point de départ : Tours, ayant pour latitude : 47.390273, et longitude : 0.688834
 * Point d'arrivée : Lyon, ayant pour latitude : 45.764859, et longitude : 4.835036
 */
var tours = new google.maps.LatLng(47.390273,0.688834);
var lyon = new google.maps.LatLng(45.764859,4.835036);

/**
 * Le résultat est affecté à la variable distance
 */
var distance = google.maps.geometry.spherical.computeDistanceBetween( tours, lyon );
alert("La distance entre Tours et Lyon à vol d'oiseau est de " + distance + " mètres");

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

<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&libraries=geometry&callback=initialisation"></script>

Carte Google Maps calculant la distance séparant deux points à l'aide de computeDistanceBetween

Distance Tours - Fukushima : mètres.

Code utilisant computeDistanceBetween pour calculer la distance entre deux points

<!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>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 600px
			}
			#info {
				background: #fff;
				padding: 5px;
				font-size: 14px;
				font-family: arial
			}
		</style>
	</head>
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<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>
		<script>
			function initialisation(){
				var zoneContenantMarqueurs = new google.maps.LatLngBounds();
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 6,
					center: {lat: 47.389982, lng: 0.688877}
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);

				var tours = new google.maps.LatLng(47.390273,0.688834);
				var marqueurTours = new google.maps.Marker({
					map: maCarte,
					position: tours
				});
				zoneContenantMarqueurs.extend(tours);

				var fukushima = new google.maps.LatLng(37.316864,141.024928); 
				var marqueurFukushima = new google.maps.Marker({
					map:maCarte,
					position:fukushima
				});
				zoneContenantMarqueurs.extend(fukushima);

				var optionsPolylineDistance = {
					map:maCarte,
					path:[tours, fukushima],
					geodesic:true
				};

				var polylineDistance = new google.maps.Polyline( optionsPolylineDistance );
				var distance = google.maps.geometry.spherical.computeDistanceBetween( tours, fukushima );
				maCarte.fitBounds( zoneContenantMarqueurs );
				document.getElementById('info').innerHTML = "Distance Tours (FR) - Fukushima (JP) : " + distance + " mètres";
			}
		</script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&libraries=geometry&callback=initialisation"></script>
	</body>
</html>