Leaflet地图标记无法在点击时打开弹出窗口

Question

我刚开始使用Leaflet和Marker Clusterer来组织标记。

问题＃1：单击未聚集的标记时，没有弹出窗口。

问题＃2：当聚类被多次点击时，所有在该聚类中的标记都会出现，当单击其中一个标记时，它的弹出窗口出现！但是，在通过单击地图关闭弹出窗口后，单击这些聚合标记中的任何一个都不会打开任何弹出窗口！

如果我只有3个未聚集的标记，则弹出窗口运行良好。然而，随着添加更多标记，一旦形成聚类，单击其中任何聚类内的标记将不会使弹出窗口打开！

初始化标记聚类器

markers = new L.MarkerClusterGroup();
map.addLayer(markers);

所有标记已添加到标记聚合器markers

循环调用render函数创建marker并将其添加到标记聚合器的数组markers中。（忽略backbone.js代码）

ListingMarkerView = Backbone.View.extend({
    template: _.template( $('#tpl_ListingMarkerView').html() ),

    render: function() {

        // Create marker
        var content = this.template( this.model.toJSON() );
        var marker = new L.marker(
            [this.model.get('lat'), this.model.get('lng')],
            {content: content});
        marker.bindPopup(content);

        // Add to markerclusterer
        markers.addLayer(marker);
    }
});

没有标记聚合器

如果我直接将 marker 添加到 map 而不是添加到标记聚合器数组 markers 中，弹出窗口就能正常工作，所以我想问题应该与标记聚合器有关。

是我做错了什么导致弹出窗口出现这样的行为吗？非常感谢任何帮助！

- Nyxynyxx

Answer 1

根据我对集群标记组的了解，您应该这样做：

var markerGroup = new L.MarkerClusterGroup();
markerGroup.on('click', function(ev) {
    // Current marker is ev.layer
    // Do stuff
});

如果想将事件处理程序添加到集群图层中，可以按照以下操作：

markerGroup.on('clusterclick', function(ev) {
    // Current cluster is ev.layer
    // Child markers for this cluster are a.layer.getAllChildMarkers()
    // Do stuff
});

噢，还要仔细阅读 GitHub 上的 README，里面都有。

- datashaman

Answer 2

确保您的 Leaflet + Clusterer 堆栈中的所有内容（Js 和 Css）都是正确的版本。请与 Clusterer Github 存储库中的示例进行比较。

- 34m0