x

leafletjs Routenlänge ausgeben

  1. leafletjs Routenlänge ausgeben · Hoxxie (Gast) · 16.11.2016 11:38 · [flux]

    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?

    • Re: leafletjs Routenlänge ausgeben · tquadrat (Gast) · 16.11.2016 11:58 · [flux]

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

      LG Tom

    • Re: leafletjs Routenlänge ausgeben · Hoxxie (Gast) · 16.11.2016 14:34 · [flux]

      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>',

    • Re: leafletjs Routenlänge ausgeben · tquadrat (Gast) · 16.11.2016 23:18 · [flux]

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

      LG Tom

    • Re: leafletjs Routenlänge ausgeben · Hoxxie (Gast) · 17.11.2016 11:50 · [flux] 
      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);