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

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

0 голосов
/ 28 декабря 2018

Привет. Я пытаюсь добавить пользовательские маркеры, используя буклет, и рисуя маршрут, используя 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);

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

1 Ответ

0 голосов
/ 28 декабря 2018

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

Опционную функцию 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.

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

...