Balades En Normandie

Visualisation des distances sur la carte

J’ai supprimé les petites flèches noires qui indiquaient le sens de la marche sur les itinéraires des randonnées. Elles sont désormais remplacées par des étiquettes qui balisent le kilométrage :

Pour ceux que ça intéresse, j’utilise la bibliothèque epolys ( http://www.geocodezip.com/scripts/v3_epoly.js ) et sa fonction GetPointsAtDistance() qui transmet un tableau avec les coordonnées des points de la polyline a distance donnée, 1000 mètres dans notre cas. Puis j’utilise la bibliothèque markerwithlabel ( https://github.com/googlemaps/v3-utility-library/tree/master/markerwithlabel ) qui permet d’ajouter une étiquette à chaque point relevé précédemment.

        var kmArray=poly.GetPointsAtDistance(1000);        
        kmArray.forEach((item, index) => {
             createMarker(item,index+1);
        })  

	function createMarker(latlong,kilometre){
		var marker1 = new MarkerWithLabel({
		position: latlong,
		icon: new google.maps.MarkerImage('images/vide.png'),
		draggable: false,
		raiseOnDrag: false,
		map: map,
		labelContent: kilometre+" km",
		labelAnchor: new google.maps.Point(22, 0),
		labelClass: "labels", // the CSS class for the label
		labelStyle: {opacity: 0.75}
		});	
		return marker1
	}	

Laisser un commentaire