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
Charlie Hebdo Le Canard enchaîné
Charlie Hebdo : Gagnez 500.000 €uros à ne rien faire avec le masque de Pénélope Fillon Le Canard enchainé :  Mais puisque je vous dis que Pénélope n'a rien fait !
Et maintenant la sextape Les enquêteurs n'ont trouvé aucun indice matériel du travail
de Penelope, mais la trace de ses indem' de licenciement

Signez la pétition : Mme Fillon, rendez-nous ces 1.500.000 euros

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>