Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Leaflet Routing Machine (https://javascript.ru/forum/misc/80395-leaflet-routing-machine.html)

Leon-it 31.05.2020 12:48

Leaflet Routing Machine
 
Здравствуйте Я использую для отображения карты на своём сайте плагин 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>


Но дело в том что он работал лишь на одном компьютере а когда я попробовал это использовать на телефоне или другом компьютере это не работала и выдавала ошибку Я ещё новичок в этом деле его свожу написал что-то неправильно Если у вас есть другие варианты как эту задачу решить с радостью приму вашу помощь Заранее спасибо :help: :help:

https://parkpoint.pro/

voraa 31.05.2020 13:24

Цитата:

Сообщение от Leon-it
а когда я попробовал это использовать на телефоне или другом компьютере это не работала и выдавала ошибку

Исправляйте ошибку.
У вас сайт грузится по https, а скрипт запращивается по http
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

Leon-it 31.05.2020 13:54

ошибка тут но я не понимаю что исправить





Leon-it 31.05.2020 13:55


Leon-it 31.05.2020 13:56

https://prnt.sc/sr22bx

https://prnt.sc/sr235g

voraa 31.05.2020 23:28

Цитата:

Сообщение от Leon-it (Сообщение 525223)
ошибка тут но я не понимаю что исправить

<script>document.write('<script src="https://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

Leon-it 01.06.2020 05:12

Этот код ни на что не влияет я его удалил он вообще плагин для sublime текста чтобы при сохранении страница обновлялась

destus 01.06.2020 07:06

Leon-it,
видимо происходит запрет на передачу геоданных и callback на 131 строке никогда не вызывается. Подпишись на https://leafletjs.com/reference-1.6....-locationerror и посмотри, что за ошибки.

voraa 01.06.2020 08:37

Вот это место проверьте
function onLocationFound(e) {
    var a = e.latlng
    window.latr = String(a).substring(7,15);
    window.lngr = String(a).substring(16,25);
    ......

После этого у Вас

window.latr: "55.75583"
window.lngr: " 37.6173)"


Часовой пояс GMT +3, время: 16:39.