如何在路标（Leaflet Routing）中将默认标记替换为自定义图标

Question

在这里，我正在使用Leaflet Routing Machine 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);

但是我得到了两个标记，一个是默认的，另一个是我的自定义图标。您可以在我的屏幕截图中看到其中一个是默认的（蓝色标记），另一个是自定义图标（停止图片）。

我想用自定义标记替换默认的蓝色标记，并删除默认标记。谢谢。

- Bhavesh Chauhan

---

看起来路径点标记创建函数不支持任何路径点标记选项。因此，您应该使用Leaflet的Map.eachLayer逐个替换路径点标记，或者向leaflet-routing-machine提交功能请求问题。 - lonelyelk

Answer 1

您可以使用以下代码：

   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);

- HamidReza

Answer 2

最终，我找到了一个解决方案。 添加了属性。

createMarker: function() { return null; },

- Bhavesh Chauhan

---

这也意味着你可以返回你的标记而不是“null”。 - lonelyelk