Здравствуйте Я использую для отображения карты на своём сайте плагин leaflet У меня есть три точки на карте и ещё одна который обозначает место где находится пользователь Мне нужно узнать самый короткий маршрут до ближайшей точки для этого я хотел использовать плагин Leaflet Routing Machine И сделал вот такой код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Machine Example</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<link rel="stylesheet" href="leaflet-routing-machine.css" />
<style>
.map_box {
display: block;
position: relative;
width: 100%; min-width:600px;
height: 100vh;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="map_box" id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
<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>
<script>
function getMinOfArray(numArray) {
return Math.min.apply(null, numArray);
}
const osm = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png');
const map = L.map('map', {
layers: [osm]
}).setView([47.024875, 28.832333], 8);;
map.locate({setView: true});
function onLocationFound(e) {
var a = e.latlng
window.latr = String(a).substring(7,15);
window.lngr = String(a).substring(16,25);
L.marker(e.latlng).addTo(map)
.bindPopup('Это вы!')
.openPopup();
L.marker([47.024875, 28.832333]).addTo(map);
L.marker([47.046729, 28.848812]).addTo(map);
L.marker([46.990440, 28.823406]).addTo(map);
window.r =[1,2,3]
window.d =[[47.024875, 28.832333],[47.046729, 28.848812],[46.990440, 28.823406]]
var wayPoint1 = L.latLng(47.024875, 28.832333);
var wayPoint2 = L.latLng(window.latr, window.lngr);
rWP1 = new L.Routing.Waypoint;
rWP1.latLng = wayPoint1;
rWP2 = new L.Routing.Waypoint;
rWP2.latLng = wayPoint2;
var myRoute = L.Routing.osrmv1();
myRoute.route([rWP1, rWP2], function(err, routes) {
distance = routes[0].summary.totalDistance;
window.r[0] = distance / 1000
});
var wayPoint1 = L.latLng(47.046729, 28.848812);
var wayPoint2 = L.latLng(window.latr, window.lngr);
rWP1 = new L.Routing.Waypoint;
rWP1.latLng = wayPoint1;
rWP2 = new L.Routing.Waypoint;
rWP2.latLng = wayPoint2;
var myRoute = L.Routing.osrmv1();
myRoute.route([rWP1, rWP2], function(err, routes) {
distance = routes[0].summary.totalDistance;
window.r[1] = distance / 1000
});
var wayPoint1 = L.latLng(46.990440, 28.823406);
var wayPoint2 = L.latLng(window.latr, window.lngr);
rWP1 = new L.Routing.Waypoint;
rWP1.latLng = wayPoint1;
rWP2 = new L.Routing.Waypoint;
rWP2.latLng = wayPoint2;
var myRoute = L.Routing.osrmv1();
myRoute.route([rWP1, rWP2], function(err, routes) {
distance = routes[0].summary.totalDistance;
window.r[2] = distance / 1000
});
setTimeout(function(){
var ind = window.r.indexOf(getMinOfArray(window.r));
const waypoints = [{lat: window.latr,lng: window.lngr},{lat: window.d[ind][0],lng: window.d[ind][1]}];
const routingControl = L.Routing.control({
plan: new L.Routing.plan([], {
addWaypoints: false,
draggableWaypoints: false,
createMarker: () => undefined
}),
lineOptions: {
addWaypoints: false
},
collapsible: true,
show: false
});
map.addControl(routingControl);
routingControl.setWaypoints(waypoints);
}, 1000);
}
map.on('locationfound', onLocationFound);
</script>
</body>
</html>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
Но дело в том что он работал лишь на одном компьютере а когда я попробовал это использовать на телефоне или другом компьютере это не работала и выдавала ошибку Я ещё новичок в этом деле его свожу написал что-то неправильно Если у вас есть другие варианты как эту задачу решить с радостью приму вашу помощь Заранее спасибо
https://parkpoint.pro/