Einfacher Rotenplaner
Klicken sie auf der Karte für den Startpunkt und klicken sie nochmal für den Endpunkt und schon wird die Route berechnet
Der hier verwendete Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet Routing Machine Example</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<style>
#map{
height: 500px;
}
.map{
height: 500px;
}
nav{
display:flex;
}
nav .text{
width:46%;
}
#bbu{
display:flex;
}
#locate-position{
position:absolute;
top:140px;
left:25px;
z-index:9999;
height:30px;
width:30px;
overflow:hidden;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}
#locate-position img{
width:100%;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
</head>
<body>
<div id="data"></div>
<nav>
<span class="text">Start Adresse
<input type="text" id="start">
</span>
<span class="text">End Adresse
<input type="text" id="ende">
</span>
<span id="bbu">
<button id="reset">Reset</button>
<button id="route">Route</button>
</span>
</nav>
<div id="map" class="map">
</div>
<button id="locate-position" class="uk-button uk-button-success"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSoUPaqMbZ2oCU92b6RTlTMIfQuYfVMW2WKpl4IwdsJQbp5n6u"></button>
<script>
lat=8.9596;
ing=53.3456;
lat1=8.9500;
ing1=53.3400;
se=0;
var map = L.map('map').setView([ing,lat], 10);
function onLocationFound(e){
console.log(e)
cord=e.latlng;
latti=cord.lat;
ingi=cord.lng;
console.log(latti+'-'+ingi)
if(se==2){
se=0;
}
if(se==0){
$('#start').val(latti+'-'+ingi);
ing2=latti;
lat3=ingi;
}
if(se==1){
$('#ende').val(latti+'-'+ingi);
ing4=latti;
lat5=ingi;
}
se++
L.marker(e.latlng).addTo(map).bindPopup('Kordinaten '+latti+'-'+ingi).openPopup();
}
map.on('click', onLocationFound);
$('#locate-position').on('click', function(){
map.locate({setView: true, maxZoom: 15});
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}{r}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
function onLocationError(e) {
alert(e.message);
}
map.on('locationerror', onLocationError);
$('#route').click(function(){
L.Routing.control({
waypoints: [
L.latLng(ing2, lat3),
L.latLng(ing4, lat5)
],
routeWhileDragging: false
}).addTo(map);
})
$('#reset').click(function(){
$('#start').val('');
$('#ende').val('');
se=0;
})
map.on('move', function(){
var zm = map.getZoom();
var ctr = map.getCenter();
var ll = 'ZOOM:' + zm + ' | MAPCENTER: Lat: '+ ctr['lat'].toFixed(4) + ' Lng: '+ ctr['lng'].toFixed(4) + ' | <span id="recenter">Re-center</span>';
$('#data').html(ll);
});
</script>
</body>
</html>