Ce tutoriel vous montre comment calculer le point d'arrivée en connaissant :
- Le point de départ : LatLng,
- Le cap : en degrès,
- La distance à parcourir : en mètres.
Carte Google Maps
Départ : Tours ( , ) ![]()
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 )
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 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 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('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: pointDepart
});
var pointArrivee = google.maps.geometry.spherical.computeOffset(pointDepart, distance, cap);
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: 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);
}
</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>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="http://static.touraineverte.com/pegman.gif" alt="Départ" width="7" height="14"/>
</div>
</body>
</html>
