Question

我有一个带有交互式地图的大型Web项目，一切正常。最后要做的是样式设置，我想简单地（或者我认为是这样）更改默认ClusterMarker的颜色。我真的很喜欢圆圈的美感，它上面有很多元素，但是我希望有8/9种不同的颜色，而不是默认的3种（绿色，黄色和红色）。

我尝试遵循许多stackoverflow答案和文档，但是没有一个答案起作用。

以下是我目前所拥有的：

var markersEU = new L.MarkerClusterGroup({
    showCoverageOnHover: false,
    iconCreateFunction: function(cluster) {
        var t = cluster.getChildCount();
        return new L.divIcon(
            {
                html: "<div><span>" + t + "</span></div>",
                className: "leaflet-marker-icon marker-cluster marker-cluster-eu leaflet-zoom-animated leaflet-interactive",
                iconSize: new L.Point(40, 40)
            }
        );
    }
});

这是MarkerCluster.Default.css文件

.marker-cluster-small {
    background-color: rgba(181, 226, 140, 0.6);
    }
.marker-cluster-small div {
    background-color: rgba(110, 204, 57, 0.6);
    }

.marker-cluster-medium {
    background-color: rgba(241, 211, 87, 0.6);
    }
.marker-cluster-medium div {
    background-color: rgba(240, 194, 12, 0.6);
    }

.marker-cluster-large {
    background-color: rgba(253, 156, 115, 0.6);
    }
.marker-cluster-large div {
    background-color: rgba(241, 128, 23, 0.6);
    }

.marker-cluster-eu {
    background-color: rgba(74, 74, 206, 0.6);
    }
.marker-cluster-eu div{
    background-color: rgba(35, 35, 200, 0.6);
    }

    /* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
    background-color: rgb(181, 226, 140);
    }
.leaflet-oldie .marker-cluster-small div {
    background-color: rgb(110, 204, 57);
    }

.leaflet-oldie .marker-cluster-medium {
    background-color: rgb(241, 211, 87);
    }
.leaflet-oldie .marker-cluster-medium div {
    background-color: rgb(240, 194, 12);
    }

.leaflet-oldie .marker-cluster-large {
    background-color: rgb(253, 156, 115);
    }
.leaflet-oldie .marker-cluster-large div {
    background-color: rgb(241, 128, 23);
}

.leaflet-oldie .marker-cluster-eu {
    background-color: rgb(74, 74, 206);
    }
.leaflet-oldie .marker-cluster-eu div{
    background-color: rgb(35, 35, 200);
}

.marker-cluster {
    background-clip: padding-box;
    border-radius: 20px;
    }
.marker-cluster div {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;

    text-align: center;
    border-radius: 15px;
    font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
    }
.marker-cluster span {
    line-height: 30px;
    }

如您所见，除了添加自己的marker-cluster-eu样式外，我没有更改默认样式中的任何内容。

这是所有内容所在的github（如果它有助于找到解决方案）：https://github.com/MaxMichel2/PWEB

为使事情完全清楚，我想使所有关于簇及其美学的内容保持默认，并且仅更改颜色。

谢谢！

如何更改MarkerCluster图标颜色但保留原始图标设计

0 个答案: