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

Question

我有一个小问题。我将 Leaflet 与插件一起使用 Control Search and 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});

您正在做的是添加另一个 object 作为参数。那行不通，因为 L.Marker 根据文档：http://leafletjs.com/reference.html#marker 只需要两个选项，第一个是 latLng object 或带坐标的数组，第二个选项 object.您应该像这样将属性和值添加到选项 object 中：

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

现在标题属性在选项 object 中可用，因此您的搜索插件将再次起作用。

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

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

Leaflet. Control Search and Custom Icons

leaflet