Calculer un cap entre deux points ( Départ et Arrivée ) avec computeHeading
Le cap est l'angle séparant votre direction du Nord vrai.
Dans l'API Google Maps Javascript, le cap est défini en degrés par rapport au Nord vrai, et en tournant dans le sens des aiguilles d'une montre.
Le Nord vrai correspondant à un cap de 0 degrés.
Pour calculer le cap à suivre pour aller du point de départ A au point d'arrivée B, on utilise la méthode computeHeading( depart, arrivee ), en lui passant deux paramètres :
- depart : est un objet
LatLngavec les coordonnées du point de départ A, - arrivee : est un objet
LatLngavec les coordonnées du point d'arrivée B.
var pointDepart = new google.maps.LatLng( latitudeDepart longitudeDepart );
var pointArrivee = new google.maps.LatLng( latitudeArrivee, longitudeArrivee );
var capASuivre = google.maps.geometry.spherical.computeHeading( pointDepart, pointArrivee );
Exemple :
/**
* Dans cet exemple on souhaite calculer le cap entre ces 2 points :
* Départ : Tours (FR) : lat: 47.390273, lng: 0.688834
* Arrivée : Fukushima (JA) : lat: 37.316864, lng: 141.024928
*/
var Tours = new google.maps.LatLng(47.390273,0.688834);
var Fukushima = new google.maps.LatLng(37.316864,141.024928);
/**
* Résultat le cap a pour valeur : 30.522621338711815 degrès
* Conclusion lorsque je suis à Tours et que je regarde le Nord vrai
* Je dois me tourner de 30.52 degrès dans le sens des aiguilles d'une montre
* puis marcher en ligne droite pour atteindre Fukushima ... d'ici quelques jours !
*/
var cap = google.maps.geometry.spherical.computeHeading(Tours, Fukushima);
alert("valeur du cap : " + cap + " degrès.");
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 et calcul d'un cap à partir du point de départ et d'arrivée
Départ : Tours - Latitude : , Longitude :
Arrivée : Fukushima - Latitude : , Longitude :
Nord vrai : représenté par la ligne rouge
Parcours : représenté par la ligne bleue
Cap calculé : degrés par rapport au Nord vrai
Arrivée : Fukushima - Latitude : , Longitude :
Nord vrai : représenté par la ligne rouge
Parcours : représenté par la ligne bleue
Cap calculé : degrés par rapport au Nord vrai
Exemple de code pour calculer le cap à suivre pour aller du point de départ A au d'arrivée B
<!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>
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">
<b>Départ</b> : Tours ( <span id="origineLat"></span>, <span id="origineLng"></span> ) <img src="https://static.www.touraineverte.fr/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="https://static.www.touraineverte.fr/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>
<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 () {
/**
* 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 tours = new google.maps.LatLng(47.390273,0.688834);
var fukushima = new google.maps.LatLng(37.316864,141.024928);
var limites = new google.maps.LatLngBounds();
limites.extend(tours);
limites.extend(fukushima);
limites.extend(new google.maps.LatLng(70.407348,66.796875));
var optionsCarte = {
zoom: 4,
center: tours
};
var maCarte = new google.maps.Map(document.getElementById('EmplacementDeMaCarte'), optionsCarte);
var marqueurDepart = new google.maps.Marker({
map: maCarte,
icon: {
url: 'https://static.www.touraineverte.fr/marqueurDvert.png',
size: new google.maps.Size(24, 38),
anchor: new google.maps.Point(11, 37)
},
position: tours
});
var marqueurArrivee = new google.maps.Marker({
map: maCarte,
icon: {
url: 'https://static.www.touraineverte.fr/pegman.gif',
size: new google.maps.Size(16, 31),
anchor: 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>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&libraries=geometry&callback=initialisation"></script>
</body>
</html>