更改 leaflet markercluster 图标颜色,继承其余默认 CSS 属性
Changing leaflet markercluster icon color, inheriting the rest of the default CSS properties
所以,我正在尝试更改传单地图中标记簇图标的颜色。我只想更改继承其余默认属性(即形状、文本属性等)的颜色。
在这个 example 中,有一些类似于我想要得到的东西,但是他们定义了一个全新的 CSS class 而不使用默认的图标样式。我需要的是这样的东西,但具有自定义颜色:
我知道我必须自定义 iconCreateFunction
。我正在尝试这样:
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});
}
});
不幸的是,该解决方案不起作用并导致丑陋的图标呈现。
我怎样才能更改默认标记群集图标的颜色?
你的 iconCreateFunction
应该看起来像这样
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) });
}
然后给css一些这样的东西
.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);
}
请参阅下面的插件以获取完整的工作示例
非常简单,只需在 global.css 或 style.css 文件中添加 CSS
.marker-cluster-small {
background-color: #49afa5 !important;
}
.marker-cluster-small div {
background-color: #1c9489 !important;
color: #fff !important;
}
所以,我正在尝试更改传单地图中标记簇图标的颜色。我只想更改继承其余默认属性(即形状、文本属性等)的颜色。
在这个 example 中,有一些类似于我想要得到的东西,但是他们定义了一个全新的 CSS class 而不使用默认的图标样式。我需要的是这样的东西,但具有自定义颜色:
我知道我必须自定义 iconCreateFunction
。我正在尝试这样:
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});
}
});
不幸的是,该解决方案不起作用并导致丑陋的图标呈现。
我怎样才能更改默认标记群集图标的颜色?
你的 iconCreateFunction
应该看起来像这样
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) });
}
然后给css一些这样的东西
.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);
}
请参阅下面的插件以获取完整的工作示例
非常简单,只需在 global.css 或 style.css 文件中添加 CSS
.marker-cluster-small {
background-color: #49afa5 !important;
}
.marker-cluster-small div {
background-color: #1c9489 !important;
color: #fff !important;
}