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

Question

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

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

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

以前我使用这种方法来添加自定义图标：

// 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]
    });

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

PS我对JS不是很好

任何帮助，将不胜感激：）

Answer 1

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

首先，您需要将新自定义图标的变量放在新标记 function 上方。 如果将其放在 function 下方，则根本不会执行自定义图标变量。

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

谢谢：）