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

Calculer un cap pour atteindre un point particulier

Tutoriel publié le
Tutoriel en Français

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 Google Maps

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

<!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>