en noir : code obligatoire
en vert : explications
en rouge : code personnalisable
en grisé : construction d'une carte simple par défaut
<!DOCTYPE html>
<html>
<head>
<title>Carte Leaflet : calcul d'une distance (OSM) pleine fenêtre</title>
<meta charset="utf-8" />
<style>
/* style pour carte plein écran, pour limiter voir la div "carte" */
#carte {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!--Inclusion de la bibliothèque Leaflet et sa feuille de style.-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
</head>
<body>
<div id="carte" ></div>
<script>
var macarte = L.map('carte').setView([43.834527, 1.40625], 5);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> @Lafayette-68'
}).addTo(macarte);
var marker1 = L.marker([43.11764281563852, 5.938079506158829], {draggable:'true'}).bindPopup('').addTo(macarte);
var marker2 = L.marker([43.11764281563852, 5.938079506158829], {draggable:'true'}).bindPopup('La distance sera sur le dernier marqueur bougé').addTo(macarte);
var ligne = L.polyline([]).addTo(macarte);
// on appelle une commande sur le marqueur
marker1.on('dragend', calcdepl);
marker2.on('dragend', calcdepl);
marker1.on('drag', trace);
marker2.on('drag', trace);
// fonction calcul de la distance après déplaceent
function calcdepl(e) {
var marque = e.target;
var coordmark1 = marker1.getLatLng();
var coordmark2 = marker2.getLatLng();
distance = Math.round(coordmark1.distanceTo(coordmark2) / 1000.0);
marque.getPopup().setContent('Distance = '+distance+' km');
marque.openPopup();
};
// fonction tracé de la ligne
function trace(e) {
ligne.setLatLngs([marker1.getLatLng(), marker2.getLatLng()]);
}
</script>
<noscript>
<p>Il semble que JavaScript soit 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>
</body>
</html>