Имя элемента управления маршрутизацией и добавление пользовательских маркеров

Привет, я пытаюсь добавить пользовательские маркеры с помощью листовки и нарисовать маршрут с помощью Routing.control. Мне нужно добавить переменную в маркеры, так как мне нужно время от времени обновлять одну из позиций маркера. У меня всегда будет только 3 маркера или путевых точки: начало, 2-я и 3-я. Мне, вероятно, нужно будет переместить только начальный маркер.

Код для добавления маршрута, который рисует маршрут и добавляет маркеры по умолчанию:

var route = L.Routing.control({
     waypoints: [
    L.latLng(my_lat, my_lng),
    L.latLng(job_p_lat, job_p_lng),
    L.latLng(job_d_lat, job_d_lng)
 ],show: false, units: 'imperial',
 router: L.Routing.mapbox('API KEY HERE')
}).addTo(map);

Я пробовал несколько вещей, которые не стоит показывать, так как ничего не сделал. Любой совет будет отличным, спасибо


person larry chambers    schedule 28.12.2018    source источник
comment
Вы хотите изменить значок маркера? Можете ли вы объяснить термин «пользовательский маркер»?   -  person kboul    schedule 28.12.2018
comment
Да, я хотел бы добавить маркер другого цвета для каждой точки и иметь возможность обновлять маркер с именем start   -  person larry chambers    schedule 28.12.2018
comment
Обновить маркер с именем start? Что это значит?   -  person kboul    schedule 28.12.2018
comment
определить маркер как начало, чтобы я мог обновить координаты начальных маркеров   -  person larry chambers    schedule 28.12.2018
comment
Я не уверен, что полностью понимаю это. Вы можете сохранить маркер в переменной, а затем соответствующим образом обновить координаты. Я могу помочь вам с другим значком маркера.   -  person kboul    schedule 28.12.2018
comment
Я пробовал все вроде createMarker(34.07381780761041, -118.44177995896911, это был маркер, сделанный из нашей функции!) и т. д., но без радости и спасибо за вашу помощь.   -  person larry chambers    schedule 28.12.2018


Ответы (1)


Если вы посмотрите на эту проблему, вы увидите, что задаете вопросы относительно различных значки маркеров уже ответили.

Функцию опции createMarker для L.Routing.control можно использовать следующим образом:

// source: https://github.com/pointhi/leaflet-color-markers
var greenIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});
L.Routing.control({
  waypoints: [
    L.latLng(57.74, 11.94),    // startmarker
    L.latLng(57.6792, 11.949) // endmarker
  ],
  createMarker: function(i, wp, nWps) {
    if (i === 0 || i === nWps - 1) {
      // here change the starting and ending icons
      return L.marker(wp.latLng, {
        icon: greenIcon // here pass the custom marker icon instance
      });
    } else {
      // here change all the others
      return L.marker(wp.latLng, {
        icon: yourOtherCustomIconInstance
      });
    }
  }
}).addTo(map);

Демонстрация – откройте ее в режиме инкогнито, так как существует ограничение на количество запросов к API.

Вы должны увидеть что-то вроде этого:

Обновление: для динамического изменения маршрута вам нужно сделать следующее:

сохраните свой экземпляр управления маршрутизацией в переменной: var control = L.Routing.control({...})

а затем измените положение маркера следующим образом:

// this is the starting marker latitude
control.getRouter().options.waypoints[0].lat = L.latLng(59.74, 11.94);

// similarly for longitude and for ending marker to change the position dynamically

а затем обновите граф маршрута:

control.route();
person kboul    schedule 28.12.2018
comment
Кажется, это ничего не делает, я добавлю его в свой код и посмотрю, что произойдет, а также где там, где я могу добавить var startmarker = и endmarker = и т. д.? - person larry chambers; 28.12.2018
comment
Я исправил ссылку на проблему, добавил изображение и добавил несколько комментариев. - person kboul; 28.12.2018
comment
Супер, у меня все работает, спасибо, так что, где вы говорите // здесь измените начальный и конечный значки // как мне изменить значки для 3 точек и определить их как начальный маркер, средний маркер и конечный маркер? - person larry chambers; 29.12.2018
comment
Вы просто передаете экземпляр только что созданного пользовательского маркера с пользовательским значком и возвращаете его. Что не понятного? В приведенном выше случае greenIcon — это переменная, содержащая только что созданный экземпляр значка. yourOtherCustomIconInstance — еще один - person kboul; 29.12.2018
comment
Я слышу вас, поэтому я создаю varredIcon = new L.Icon({ и т. д., где мне добавить это? И назовите его конечным маркером? Извините за вопросы, я просто не понимаю этого вообще! спасибо - person larry chambers; 29.12.2018
comment
и я добавил еще один значок: yourOtherCustomIconInstance, и он все еще загружается как зеленый маркер? - person larry chambers; 29.12.2018
comment
Хорошо, он добавляет маркер другого цвета, если я добавляю 3-ю путевую точку. Но не ясно, почему это не так, когда всего 2 добавлено? - person larry chambers; 29.12.2018
comment
Он работает с 2 маркерами, если я меняю i === 0 || i === nWps + 1, а как насчет добавления всплывающего окна? - person larry chambers; 29.12.2018