Leaflet - 将自定义图标添加到标记层以与 L.Control.Search 一起使用

Question

我一直在努力寻找解决方案以使其工作或这个问题的答案，但我失败了，所以这里是：

我有一张定制的假想地图（假设它来自游戏），我想添加搜索栏来搜索我添加的标记。以前的方法不允许我添加“L.Control.Search”来搜索标记，所以我采用了来自https://github.com/stefanocudini/leaflet-search 的方法，使用名为“outside.html”的示例。

我使用一个函数从数组中向 LayerGroup 添加标记。所以我把它分成两个数组来添加到两个不同的组中。

之前我是用这个方法来添加自定义图标的：

// Add Marker
    var city1 = L.marker(map.unproject([5074, 4952], map.getMaxZoom()), {icon: city1_icon})
        .bindPopup('<b>City1</b>').bindTooltip('C1', {permanent: true}).openTooltip();

// Custom Icon
var city1_icon = L.icon({
    iconUrl: 'ICONS/RENDERS/city1.png',
    iconSize: [45, 100],
    iconAnchor: [22.5, 100],
    popupAnchor: [0, -75],
    shadowUrl: 'ICONS/RENDERS/city1_shadow.png',
    shadowSize: [41, 35],
    shadowAnchor: [0, 35]
});

但是现在要添加标记，我正在使用这种方法并且标记的图标不会从默认值改变：

//sample data values to populate map
// ==================================================================================
    var data = [
        {"loc":[5627, 3946], "title":"City11", "coord":"123"},
    ];
    
    var data2 = [
        {"loc2":[3326, 5544], "title2":"City21", "coord2":"321"},
    ];

var markersLayer = new L.LayerGroup();  //layer contain searched elements
map.addLayer(markersLayer);

var markersLayer2 = new L.LayerGroup();
map.addLayer(markersLayer2);

map.addControl( new L.Control.Search({
    layer: L.layerGroup([markersLayer, markersLayer2]),
    initial: false,
    zoom: 4,
    collapsed: false,
}) ); // end addControl
//inizialize search control

////////////populate map with markers from sample data
for(i in data) {
    var title = data[i].title,  //value searched
        loc = data[i].loc,      //position found
        coord = data[i].coord,  //icon used
        cityMarker = new L.Marker(map.unproject(loc, map.getMaxZoom()), {title: title}, {icon: city1_icon})
        .bindPopup('title: '+ title + ' ' + coord);
    markersLayer.addLayer(cityMarker);
}

for(i in data2) {
    var title2 = data2[i].title2,   //value searched
        loc2 = data2[i].loc2,       //position found
        coord2 = data2[i].coord2,   //icon used
        cityMarker2 = new L.Marker(map.unproject(loc2, map.getMaxZoom()), {title: title2}, {icon: city2_icon})
        .bindPopup('title: '+ title2 + ' ' + coord2);
    markersLayer2.addLayer(cityMarker2);
}

// Custom Icons
    var city1_icon = L.icon({
        iconUrl: 'ICONS/RENDERS/city1.png',
        iconSize: [45, 100],
        iconAnchor: [22.5, 100],
        popupAnchor: [0, -75],
        shadowUrl: 'ICONS/RENDERS/city1_shadow.png',
        shadowSize: [41, 35],
        shadowAnchor: [0, 35]
    });

    // Custom Icon
    var city2_icon = L.icon({
        iconUrl: 'ICONS/RENDERS/city2.png',
        iconSize: [45, 100],
        iconAnchor: [22.5, 100],
        popupAnchor: [0, -75],
        shadowUrl: 'ICONS/RENDERS/city2_shadow.png',
        shadowSize: [41, 35],
        shadowAnchor: [0, 35]
    });

除了自定义图标之外的一切都有效。

附：我不太擅长JS

任何帮助将不胜感激:)

Answer 1

所以解决方案非常简单，感谢@IvanSanchez。

首先，您需要将新自定义图标的变量放在新标记函数上方。如果你把它放在函数下面，它根本不会执行自定义图标变量。

var newCustomIcon = L.icon({
    iconUrl: 'ICONS/newCustomIcon.png',
    iconSize: [45, 100],
    iconAnchor: [22.5, 100],
    popupAnchor: [0, -75],
    shadowUrl: 'ICONS/newCustomIcon_shadow.png',
    shadowSize: [41, 35],
    shadowAnchor: [0, 35]
});

其次，您需要将这些更改添加到 L.Marker 的相同选项部分，例如：

应该是{title: title2, icon: newCustomIcon}而不是{title: title2}, {icon: newCustomIcon}

for(i in data) {
    var title = data[i].title,  //value searched
        loc = data[i].loc,      //position found
        cityMarker = new L.Marker(map.unproject(loc, map.getMaxZoom()), {title: title, icon: newCustomIcon})
        .bindPopup('title: '+ title + ' ' + coord);
    markersLayer.addLayer(cityMarker);
}

谢谢:)