问题描述
所以,我正在尝试更改传单地图中标记群集图标的颜色.我只想更改继承其余默认属性(即形状、文本属性等)的颜色.
在这个
我知道我必须自定义 iconCreateFunction
.我正在尝试这种方式:
CSS
.foo { 背景颜色:红色;}.bar { 背景颜色:蓝色;}
JavaScript
var 标记 = L.markerClusterGroup({iconCreateFunction:函数(集群){//这里有一段代码决定了变量 'class_name' 的值是 foo 还是 barreturn L.divIcon({ className: "marker-cluster-medium "+class_name});}});
不幸的是,该解决方案不起作用并导致图标呈现丑陋.
我怎样才能改变默认markercluster图标的颜色?
你的 iconCreateFunction
应该是这样的
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
这篇关于更改传单标记群集图标颜色,继承其余默认 CSS 属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!