Question

我有小问题。我将Leaflet与插件Control Search和Marker Cluster一起使用。

我需要添加自定义图标，然后阅读http://leafletjs.com/examples/custom-icons.html

中的教程

当我将代码{icon：iconRed}添加到L.Marker时，搜索不再有效。

我的代码示例：

var markers = L.markerClusterGroup({ disableClusteringAtZoom: 16 });

/////////////

var controlSearch = new L.Control.Search({layer: markers, initial: false});

/////////////

var LeafIcon = L.Icon.extend({
        options: {
            iconSize:     [32, 37],
            iconAnchor:   [16, 37],
            popupAnchor:  [1, -30]
        }
});
/////////////

var iconRed = new LeafIcon({iconUrl: './images/marker_icons/red.png'}),
    iconGreen = new LeafIcon({iconUrl: './images/marker_icons/green.png'});

/////////////

var addressPoints = [
    [0,0, "Item 1"],
    [1,1, "Item 2"],
    [2,2, "Item 3"],
    [3,3, "Item 4"]
];

/////////////

for (var i = 0; i < addressPoints.length; i++) {
    var a = addressPoints[i];   
    var title = a[2];

    marker = new L.Marker(new L.latLng(a[0], a[1]), {icon: iconRed}, {title: title});

    marker.bindPopup(title);

    markers.addLayer(marker);
}

/////////////

map.addLayer(markers);

/////////////

map.addControl(controlSearch);

Answer 1

您的问题在于您实施标记的方式：

L.Marker(new L.latLng(a[0], a[1]), {icon: iconRed}, {title: title});

您正在做的是添加另一个对象作为参数。这不起作用，因为L.Marker根据文档：http://leafletjs.com/reference.html#marker只有两个选项，第一个是latLng对象或带坐标的数组，第二个是选项对象。您应该将属性和值添加到选项对象中，如下所示：

L.Marker(new L.latLng(a[0], a[1]), {
    'icon': iconRed,
    'title': title
});

现在，title属性在options对象中可用，因此您的搜索插件将再次出现。

这是关于Plunker的一个工作示例：http://plnkr.co/edit/46VJcp?p=preview

传单。控制搜索和自定义图标

1 个答案: