OpenStreetMap Forum

Hoxxie

Member

Registered: 2016-11-16

Posts: 3

leafletjs Routenlänge ausgeben

Hi,

bin ziemlich neu dabei mich mit OSM Maps zu beschäftigen.

Ich möchte in einem bestimmten DIV die länge der Route anzeigen lassen. Ich habe es schon soweit, das ich die Route ausgeben kann, aber die Kilometerangaben fehlen mir noch.

Kann mir da jemand helfen?

tquadrat

Member

Registered: 2015-03-03

Posts: 113

Re: leafletjs Routenlänge ausgeben

Schau mal da http://www.liedman.net/leaflet-routing-machine/

LG Tom

Hoxxie

Member

Registered: 2016-11-16

Posts: 3

Re: leafletjs Routenlänge ausgeben

wenn ich richtig liege, geht es über das Template oder? aber wie  binde ich das in ein eigenes div ein?

summaryTemplate: '<h2>{name}</h2><h3>{distance}, {time}</h3>',

tquadrat

Member

Registered: 2015-03-03

Posts: 113

Re: leafletjs Routenlänge ausgeben

Kannst du mal den Code posten damit ich mir ein besseres Bild machen kann ?

LG Tom

Hoxxie

Member

Registered: 2016-11-16

Posts: 3

Re: leafletjs Routenlänge ausgeben

var map = L.map('map', { scrollWheelZoom: true }),
	waypoints = [
				L.latLng(52.548365, 13.407671),
				L.latLng(52.5375121, 13.4236475),
				L.latLng(52.5144239, 13.4654698),
				L.latLng(52.5142862, 13.4671353),
				L.latLng(52.5123855, 13.4782605),
				L.latLng(52.5081758, 13.4800137),
				L.latLng(52.5077505, 13.6094086),
				L.latLng(52.5207575, 13.6018098)
	];

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
				attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
			}).addTo(map);

var control = L.Routing.control({
		plan: L.Routing.plan(waypoints, {
			createMarker: function(i, wp) {
				return L.marker(wp.latLng, {
					draggable: true,
					icon: L.icon.glyph({ glyph: String.fromCharCode(65 + i) })
				});
			},
			geocoder: L.Control.Geocoder.nominatim(),
			routeWhileDragging: true
		}),
		summaryTemplate: '<h3>Gesamtstrecke: {distance}, Fahrzeit: {time}</h3>',
		routeWhileDragging: true,
		language:'de',
		routeDragTimeout: 250,
		showAlternatives: true,
		altLineOptions: {
			styles: [
				{color: 'black', opacity: 0.15, weight: 9},
				{color: 'white', opacity: 0.8, weight: 6},
				{color: 'blue', opacity: 0.5, weight: 2}
			]
		}
	})
	.addTo(map)
	.on('routingerror', function(e) {
		try {
			map.getCenter();
		} catch (e) {
			map.fitBounds(L.latLngBounds(waypoints));
		}

		handleError(e);
	});
var entfernung = L.Routing.itinerary(distanceTemplate);
console.log(entfernung);