Calculer la destination avec point de départ, cap et distance à parcourir

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

Déterminer le point d'arrivée en connaissant le point de départ, le cap et la distance à parcourir

Dans ce tutoriel nous allons utiliser la méthode computeOffset, présente dans google.maps.geometry.spherical, pour calculer les coordonnées d'un point arrivée en connaissant :

  • les coordonnées du point de départ {LatLng},
  • le cap (en degrès) à suivre {number},
  • la distance (en mètres) à parcourir {number}.

La valeur retournée est un objet LatLng.

var pointArrivee = google.maps.geometry.spherical.computeOffset( departDepart, distanceAParcourir, capEnDegres );
google.maps.geometry.spherical.computeOffset
/** 
 * Dans cet exemple on souhaite calculer les coordonnées du point atteind :
 * - en partant de Tours (FR),
 * - en parcourant 9.500 kms,
 * - avec un cap de 72 °.
 */
var pointDepart = new google.maps.LatLng(47.390287,0.688818);
var distanceAParcourir = 9500000;
var capEnDegres = 72;

/**
 * Résultat on arrive sur le point pointArrivee
 * situé quelque part en Thailande et ayant pour
 * coordonnées GPS 15.563547, 100.954431
 */
var pointArrivee = google.maps.geometry.spherical.computeOffset( pointDepart, distanceAParcourir, capEnDegres );

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 où le point arrivée est calculé à partir du point de départ, du cap et de la distance à parcourir

Départ : Tours ( , ) Départ
Cap : degrés par rapport au Nord vrai ( Ligne rouge ) en tournant dans le sens des aiguilles d'une montre
Distance : mètres
Point arrivée calculé : quelque part en Thailande ( , ) Parcours ( Ligne bleue ) Départ

Code pour déterminer le point arrivée à partir du point de départ, du cap et de la distance à parcourir

<!DOCTYPE html>
<html>
	<head>
		<title>Titre de votre page</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<meta charset="UTF-8">
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 600px
			}
			#info {
				background: #fff;
				padding: 5px;
				font-size: 14px;
				font-family: arial
			}
		</style>
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
		<script type="text/javascript">
			function initialisation () {
			/** 
			 * Dans cet exemple on souhaite calculer le point atteint :
			 * - en partant de Tours (FR),
			 * - en parcourant 9.500 kms,
			 * - avec un cap de 72 °.
			 */
				var pointDepart = new google.maps.LatLng(47.390287,0.688818);
				var distance = 9500*1000;
				var cap = 72;
				var optionsCarte = {
					zoom: 4,
					center: pointDepart,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var maCarte = new google.maps.Map(document.getElementById('EmplacementDeMaCarte'), optionsCarte);
				marqueurDepart = new google.maps.Marker({
					map: maCarte,
					icon: new google.maps.MarkerImage('https://static.touraineverte.fr/marqueurDvert.png', new google.maps.Size(24, 38), new google.maps.Point(0,0), new google.maps.Point(11, 37)),
					position: pointDepart
				});
				var pointArrivee = google.maps.geometry.spherical.computeOffset(pointDepart, distance, cap);
				var  marqueurArrivee = new google.maps.Marker({
					map: maCarte,
					icon: new google.maps.MarkerImage('https://static.touraineverte.fr/pegman.gif', new google.maps.Size(16, 31), new google.maps.Point(0,0), new google.maps.Point(7, 30)),
					position: pointArrivee
				});
				var nordVrai = [
					new google.maps.LatLng(47.390287,0.688818),
					new google.maps.LatLng(90,0.688818)
				]
				var nordVraiPolyline = new google.maps.Polyline({map:maCarte,path:nordVrai,strokeColor:'#FF0000',geodesic:true});
				var nordVraiCap = new google.maps.Polyline({map:maCarte,path:[pointDepart,pointArrivee],strokeColor:'#0000FF',geodesic:true});
				document.getElementById('origineLat').innerHTML = pointDepart.lat().toFixed(6);
				document.getElementById('origineLng').innerHTML = pointDepart.lng().toFixed(6);
				document.getElementById('distance').innerHTML = distance;
				document.getElementById('cap').innerHTML = cap;
				document.getElementById('destinationLat').innerHTML = pointArrivee.lat().toFixed(6);
				document.getElementById('destinationLng').innerHTML = pointArrivee.lng().toFixed(6);
				var bounds = new google.maps.LatLngBounds(marqueurDepart.getPosition(), marqueurArrivee.getPosition());
				maCarte.fitBounds(bounds);
			}
			google.maps.event.addDomListener( window, "load", initialisation );
		</script>
	</head>
	<body>
		<div id="EmplacementDeMaCarte" style="width:100%;height:300px"></div>
		<div id="info">
			<b>Départ</b> : Tours ( <span id="origineLat"></span>, <span id="origineLng"></span> ) <img src="https://static.touraineverte.fr/marqueurDvert.png" alt="Départ" width="10" height="16"/><br/>
			<b>Cap</b> : <span id="cap"></span> degrés par rapport au <span style="color:red">Nord vrai ( Ligne rouge )</span> en tournant dans le sens des aiguilles d'une montre<br/>
			<b>Distance</b> : <span id="distance"></span> mètres<br/>
			<b>Arrivée </b> : quelque part en Thailande ( <span id="destinationLat"></span>, <span id="destinationLng"></span> ) <span style="color:blue">Parcours ( Ligne bleue )</span> <img src="https://static.touraineverte.fr/pegman.gif" alt="Départ" width="7" height="14"/>
		</div>
	</body>
</html>