問題描述

所以，我正在嘗試更改傳單地圖中標(biāo)記群集圖標(biāo)的顏色.我只想更改繼承其余默認(rèn)屬性(即形狀、文本屬性等)的顏色.

在這個(gè)

我知道我必須自定義 iconCreateFunction.我正在嘗試這種方式:

CSS

.foo { 背景顏色:紅色；}.bar { 背景顏色:藍(lán)色；}

JavaScript

var 標(biāo)記 = L.markerClusterGroup({iconCreateFunction:函數(shù)(集群){//這里有一段代碼決定了變量 'class_name' 的值是 foo 還是 barreturn L.divIcon({ className: "marker-cluster-medium "+class_name});}});

不幸的是，該解決方案不起作用并導(dǎo)致圖標(biāo)呈現(xiàn)丑陋.

我怎樣才能改變默認(rèn)markercluster圖標(biāo)的顏色?

你的 iconCreateFunction 應(yīng)該是這樣的

iconCreateFunction: function (cluster) {var childCount = cluster.getChildCount();var c = 'marker-cluster-';if (childCount < 10) {c += '小';}否則 if (childCount < 100) {c += '中等';}別的 {c +='大';}return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>',className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });}

給 css 一些類似的東西

.marker-cluster-small {背景顏色:rgba(218, 94, 94, 0.6);}.marker-cluster-小 div {背景顏色:rgba(226, 36, 36, 0.6);}.marker-cluster-medium {背景色:rgba(241, 211, 87, 0.6);}.marker-cluster-medium div {背景顏色:rgba(240, 194, 12, 0.6);}.marker-cluster-large {背景色:rgba(253, 156, 115, 0.6);}.marker-cluster-大 div {背景色:rgba(241, 128, 23, 0.6);}

完整的工作示例請參見下面的 plunker

https://plnkr.co/edit/GvDbB1rzIZ4bvIkQjM0p?p=preview

So, I'm trying to change the color of the markercluster icons in a leaflet map. I just want to change the color inheriting the rest of the default properties (i.e., shape, text properties, etc...).

In this an example, there is something similar to what I want to get, but they define a brand new CSS class without using the default icons styling. What I need is something like this but with custom colors:

I do know that I have to customize iconCreateFunction. I'm trying in this way:

CSS

.foo { background-color: red;}
.bar { background-color: blue;}

JavaScript

var markers = L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        // here there is a piece code that determines the value of the variable 'class_name' is either foo or bar
        return L.divIcon({ className: "marker-cluster-medium "+class_name});
    }
});

Unfortunately, that solution does not work and leads to a ugly icon rendering.

How can I just change the color of the default markercluster icons?

your iconCreateFunction should look some thing like this

iconCreateFunction: function (cluster) {
 var childCount = cluster.getChildCount();
 var c = ' marker-cluster-';
 if (childCount < 10) {
   c += 'small';
 } 
 else if (childCount < 100) {
   c += 'medium';
 } 
 else {
   c += 'large';
 }

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

and give css some thing like this

.marker-cluster-small {
background-color: rgba(218, 94, 94, 0.6);
}
.marker-cluster-small div {
background-color: rgba(226, 36, 36, 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);
}

see the below plunker for complete working example

https://plnkr.co/edit/GvDbB1rzIZ4bvIkQjM0p?p=preview

這篇關(guān)于更改傳單標(biāo)記群集圖標(biāo)顏色，繼承其余默認(rèn) CSS 屬性的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！