Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1    

Déterminer un cap à partir des coordonnées des points de départ et d'arrivée

Tutoriel publié le Mis à jour le

Calculer un cap à partir du point de départ et d'arrivée

Ce tutoriel vous montre comment calculer un cap (en degrès), par rapport au Nord vrai, en connaissant :

  • Le point de départ : LatLng,
  • Le point d'arrivée : LatLng.

Carte et calcul d'un cap à partir du point de départ et d'arrivée

Départ : Tours ( , ) Départ

Arrivée : Fukushima ( , ) Parcours ( Ligne bleue ) Départ

Cap calculé : degrés par rapport au Nord vrai ( Ligne rouge )

Exemple de code pour calculer un cap à partir du point de départ et d'arrivée

<!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">
			#info {
				background: #fff;
				padding: 5px;
				font-size: 14px;
				font-family: arial;
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>

		<script type="text/javascript">
			function initialize () {
				/**
				 * Dans cet exemple on souhaite calculer le cap entre ces 2 points :
				 * Départ  : Tours (FR)     : 47.390273, 0.688834
				 * Arrivée : Fukushima (JA) : 37.316864, 141.024928
				 */
				var limites = new google.maps.LatLngBounds();
				var tours = new google.maps.LatLng(47.390273,0.688834);
				var fukushima = new google.maps.LatLng(37.316864,141.024928);
				limites.extend(tours);
				limites.extend(fukushima);
				limites.extend(new google.maps.LatLng(70.407348,66.796875));
				var optionsCarte = {
					zoom: 4,
					center: tours,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				var maCarte = new google.maps.Map(document.getElementById('EmplacementDeMaCarte'), optionsCarte);
				var marqueurDepart = new google.maps.Marker({
					map: maCarte,
					icon: new google.maps.MarkerImage('http://static.touraineverte.com/marqueurDvert.png', new google.maps.Size(24, 38), new google.maps.Point(0,0), new google.maps.Point(11, 37)),
					position: tours
				});
				var  marqueurArrivee = new google.maps.Marker({
					map: maCarte,
					icon: new google.maps.MarkerImage('http://static.touraineverte.com/pegman.gif', new google.maps.Size(16, 31), new google.maps.Point(0,0), new google.maps.Point(7, 30)),
					position: fukushima
				});
				var cap = google.maps.geometry.spherical.computeHeading(tours, fukushima);
				var nordVrai = [
					new google.maps.LatLng(47.390273,0.688834),
					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:[tours,fukushima],strokeColor:'#0000FF',geodesic:true});
				document.getElementById('origineLat').innerHTML = tours.lat().toFixed(6);
				document.getElementById('origineLng').innerHTML = tours.lng().toFixed(6);
				document.getElementById('cap').innerHTML = cap;
				document.getElementById('destinationLat').innerHTML = fukushima.lat().toFixed(6);
				document.getElementById('destinationLng').innerHTML = fukushima.lng().toFixed(6);
				maCarte.fitBounds(limites);
			}
		</script>
	</head>
	<body onLoad="initialize()">
		<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="http://static.touraineverte.com/marqueurDvert.png" alt="Départ" width="10" height="16"/><br/>
			<b>Arrivée </b> : Fukushima ( <span id="destinationLat"></span>, <span id="destinationLng"></span> ) <span style="color:blue">Parcours ( Ligne bleue )</span> <img src="http://static.touraineverte.com/pegman.gif" alt="Départ" width="7" height="14"/><br/>
			<b>Cap calculé</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/>
		</div>
	</body>
</html>