Question

我已经查看了Leaflet中Marker Clusters插件的CSS文件。我将图标更改为.marker-cluster-small css类中我想要的内容。我将它设置为background-image: url(....)我将群集的透明度（alpha）值设置为0，这样我才能看到我想要的图标。如何放大图标的大小，以免被切断。这是集群CSS的链接

enter link description here

Answer 1

Leaflet.markercluster中的默认图标创建方法返回

L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });

它设置的图标大小为40px，可以写入标记群集的包裹<div>，优先于您在CSS中设置的大小。

快速修复可能是在CSS中的高度和宽度属性上添加！important声明，以确保它们已应用。

更好的方法是在创建新的标记群集组时传递客户图标创建功能，如其文档中所述： Customizing the Cluster Markers

var markers = new L.MarkerClusterGroup({
    iconCreateFunction: function(cluster) {
        return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
    }
});

Answer 2

您可以尝试这样的方法来完全自定义MarkerClusterGroup图标：

var markers = new L.MarkerClusterGroup({
    spiderfyOnMaxZoom: true,
    removeOutsideVisibleBounds: true,
    animateAddingMarkers: true,
    iconCreateFunction: function(cluster) {
        var clusterSize = "small";
        if (cluster.getChildCount() >= 10) {
            clusterSize = "medium";
        }
        return new L.DivIcon({
            html: '<div><span>' + cluster.getChildCount() + '</span></div>',
            className: 'marker-cluster marker-cluster-' + clusterSize,
            iconSize: new L.Point(40, 40)
        });
    }
});

请参阅Customising the Clustered Markers。

在CSS中哪里更改Leaflet MarkerCluster图标大小？

2 个答案: