Как заменить маркер по умолчанию на пользовательский значок в путевой точке (Leaflet Routing)

Здесь я рисую маршрут и назначаю остановку для маршрута с помощью Leaflet Routing Machine Машина маршрутизации листовок

var control = L.Routing.control(L.extend(window.lrmConfig, {
    waypoints: [array object of stops],
    geocoder: L.Control.Geocoder.nominatim(),
    routeWhileDragging: true,
    reverseWaypoints: true,
    showAlternatives: true,
    altLineOptions: {
        styles: [
            {color: 'black', opacity: 0.15, weight: 9},
            {color: 'white', opacity: 0.8, weight: 6},
            {color: 'blue', opacity: 0.5, weight: 2}
        ]
    }
})).addTo(map);

В массиве объектов путевых точек я привязал пользовательский маркер, например:

L.marker([item.latLng.lat, item.latLng.lng], {icon: stopIcon}).addTo(map).bindPopup(item.name);

Но я получаю 2 маркера: 1 по умолчанию, а второй - мой собственный значок. Вы можете видеть на моем снимке экрана один по умолчанию (синий маркер) и пользовательский значок (стоп-изображение).

скриншот

Поэтому я хочу заменить значение по умолчанию (синий маркер) на свой собственный и удалить маркер по умолчанию. Спасибо.


leaflet leaflet-routing-machine
person Bhavesh Chauhan    schedule 23.12.2016    source источник
comment
Похоже, что функция создания маркера путевой точки не поддерживает никаких опций для маркеров путевых точек. Так что либо вам следует использовать Map.eachLayer Leaflet для замены маркеров путевых точек один за другим, либо вам следует сообщить о проблеме leaflet-routing-machine с запросом функции.   -  person lonelyelk    schedule 23.12.2016

Ответы (2)


arrow_upward
5
arrow_downward

Наконец, я нашел решение. Добавлено свойство

createMarker: function() { return null; },
person Bhavesh Chauhan    schedule 23.12.2016
comment
Это также означает, что вы можете вернуть свой маркер, а не null. - person lonelyelk; 24.12.2016

arrow_upward
3
arrow_downward

вы можете использовать этот код:

   L.Routing.control({
          waypoints: [
            L.latLng(36.3603179, 59.5041424),
            L.latLng(36.3279067, 59.5248145)
          ],
          routeWhileDragging: true,
          lineOptions: {
            styles: [{ color: 'green', opacity: 1, weight: 5 }]
          },
          createMarker: function (i: number, waypoint: any, n: number) {
            const marker = L.marker(waypoint.latLng, {
              draggable: true,
              bounceOnAdd: false,
              bounceOnAddOptions: {
                duration: 1000,
                height: 800,
                function() {
                  (bindPopup(myPopup).openOn(map))
                }
              },
              icon: L.icon({
                iconUrl: './assets/global/img/mapmarker-red.png',
                iconSize: [38, 95],
                iconAnchor: [22, 94],
                popupAnchor: [-3, -76],
                shadowUrl: './assets/global/img/marker-shadow.png',
                shadowSize: [68, 95],
                shadowAnchor: [22, 94]
              })
            });
            return marker;
          }
        }).addTo(map);
person HamidReza    schedule 02.07.2019