Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.05.2020, 12:48
Новичок на форуме
Отправить личное сообщение для Leon-it Посмотреть профиль Найти все сообщения от Leon-it
 
Регистрация: 06.04.2019
Сообщений: 6

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>


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

https://parkpoint.pro/
Ответить с цитированием
  #2 (permalink)  
Старый 31.05.2020, 13:24
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 394

Сообщение от Leon-it
а когда я попробовал это использовать на телефоне или другом компьютере это не работала и выдавала ошибку
Исправляйте ошибку.
У вас сайт грузится по https, а скрипт запращивается по http
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
Ответить с цитированием
  #3 (permalink)  
Старый 31.05.2020, 13:54
Новичок на форуме
Отправить личное сообщение для Leon-it Посмотреть профиль Найти все сообщения от Leon-it
 
Регистрация: 06.04.2019
Сообщений: 6

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




Ответить с цитированием
  #4 (permalink)  
Старый 31.05.2020, 13:55
Новичок на форуме
Отправить личное сообщение для Leon-it Посмотреть профиль Найти все сообщения от Leon-it
 
Регистрация: 06.04.2019
Сообщений: 6

Ответить с цитированием
  #5 (permalink)  
Старый 31.05.2020, 13:56
Новичок на форуме
Отправить личное сообщение для Leon-it Посмотреть профиль Найти все сообщения от Leon-it
 
Регистрация: 06.04.2019
Сообщений: 6

https://prnt.sc/sr22bx

https://prnt.sc/sr235g
Ответить с цитированием
  #6 (permalink)  
Старый 31.05.2020, 23:28
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 394

Сообщение от Leon-it Посмотреть сообщение
ошибка тут но я не понимаю что исправить
<script>document.write('<script src="https://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
Ответить с цитированием
  #7 (permalink)  
Старый 01.06.2020, 05:12
Новичок на форуме
Отправить личное сообщение для Leon-it Посмотреть профиль Найти все сообщения от Leon-it
 
Регистрация: 06.04.2019
Сообщений: 6

Этот код ни на что не влияет я его удалил он вообще плагин для sublime текста чтобы при сохранении страница обновлялась
Ответить с цитированием
  #8 (permalink)  
Старый 01.06.2020, 07:06
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,196

Leon-it,
видимо происходит запрет на передачу геоданных и callback на 131 строке никогда не вызывается. Подпишись на https://leafletjs.com/reference-1.6....-locationerror и посмотри, что за ошибки.
Ответить с цитированием
  #9 (permalink)  
Старый 01.06.2020, 08:37
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 394

Вот это место проверьте
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)"
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Карты. leaflet. ES6 кто работал???? Роман Андреевич Элементы интерфейса 5 26.11.2018 16:58
Leaflet JS - проверка слоя на совпадение с переменной PC_Principal Javascript под браузер 0 23.11.2018 14:08
OSM + leaflet поворот точки на заданный угол arttry Общие вопросы Javascript 1 26.01.2016 10:24
Редактирование примитивов в leaflet gruffi Библиотеки/Тулкиты/Фреймворки 2 05.01.2016 09:47
Angular Leaflet OpenStreetMap DukereD Angular.js 0 24.06.2015 20:22