popup - 传单 + MarkerCluster + 自定义图标 + 弹出窗口

Question

我想为我的标记使用自定义图标，同时使用传单 MarkerCluster .

我已经设法实现了我的自定义图标 ，但是 现在标记弹出不再工作了。

我的代码如下所示:

var markers1 = new L.MarkerClusterGroup();

// add markers with popup info
var geoJsonLayer1 = L.geoJson(Myplaces, {
   onEachFeature: function(feature, layer) {
      layer.bindPopup(feature.properties.Name);
   }
})

// add markers with custom icons
var geoJsonLayer1 = L.geoJson(Myplaces, {
   onEachFeature: onEachFeature,
   pointToLayer: function(feature, latlng) {
      var iconURL = feature.properties.img;
      return new L.Marker(new L.LatLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]), {
         icon: L.icon({
            iconAnchor: [0, 0],
            popupAnchor: [0, 0],
            iconUrl: iconURL
         })
      });
   }
})

// add markers to map
markers1.addLayer(geoJsonLayer1);
map.addLayer(markers1);

当我删除自定义图标的部分时(下面的部分“//添加带有自定义图标的标记”)，
标记弹出窗口再次正常工作......

有什么建议？
非常感谢您的帮助!!

(我尝试了我能想到的所有方法，我快要疯了……)； )

Answer 1

编辑:哎呀!误解了你的问题。是的，问题是你做了两次 L.geoJson 并用它们做不同的事情。此函数返回一个新的 L.GeoJson 对象，因此您添加弹出窗口的内容不是您制作自定义标记的内容。所以是的，你应该把它们结合起来。

var geoJson = L.geoJson(geoJsonData, {
    pointToLayer: function(obj) {
        var mark = L.circleMarker(obj.geometry.coordinates, obj.properties);
        mark.bindPopup('<div>' + marks.length + '</div>');
        return mark;
    }
});

这段代码来自我做的更新示例 here .

我将在下面讨论自定义集群图标。

作为旁注，尝试创建两个具有相同名称的变量通常是不好的做法，并且大多数 linter 会提示这一点。

...

我创建了一个使用集群、弹出窗口和自定义图标的小演示 ​​ here .

当你创建 MarkerClusterGroup 时，你可以给它一个任意函数，为集群创建图标:

iconCreateFunction: function(cluster) {
    var count = cluster.getChildCount();
    return L.divIcon({
        html: '<span class="custom">' + (count + 100) + '</span>'
    })
}

您可以在哪里放置自定义集群图标的逻辑。对于单个标记，您可以直接将图标传递给构造函数。您还会注意到弹出窗口适用于标记和集群。

编辑:以前的 jsfiddles 现在与传单和标记集群版本不兼容。这是一个 working version

希望这可以帮助!