0

我正在处理要在 markerClusterGroup 中显示标记的地图，并且每个 markerClusterGroup 必须具有不同的背景颜色。

if (isChecked) {
    color_html=$widget.data('colorhtml');
    add_contacts(file);
}



add_contacts(file){
   my_objects["contactsGroupe_"+file]=new L.markerClusterGroup({
        iconCreateFunction: function(cluster) {
            return new L.DivIcon({ 
              html: '<div style="color: white; background: '+color_html+'; border-radius:5px;  text-align: center; font-size: 18px;  box-shadow: 8px 8px 12px grey; border: 0.1px solid '+color_html+'; display: inline-block; vertical-align:middle;">' + cluster.getChildCount() +'</div>',
              iconSize: [0,0]
           });
        },
    }).addTo(map);
}           
my_objects["contactsGroupe_"+file].addLayer(my_objects["contacts_"+file]);

我有一个清单，我可以在其中选择要显示的文件。当我检查第一个文件时，markerClusterGroup 以选择的背景颜色显示，当我选择第二个文件时，第二个 markerClusterGroup 以不同的背景颜色显示，但是当我放大或缩小时，两个 markerClusterGroup 有相同的背景颜色（与最后选择的颜色相同），当我返回初始缩放时，我有两种不同的颜色。如果我想在不同的缩放中有不同的背景颜色，我必须在添加第一个 markerClusterGroup 之后和添加第二个 markerClusterGroup 之前进行每个缩放。

有人可以帮助我理解这个问题。谢谢

4

2 回答 2

0

您还可以将颜色作为参数添加到您的函数中：

if (isChecked) {
    color_html=$widget.data('colorhtml');
    add_contacts(file, color);
}



add_contacts(file, color){
   my_objects["contactsGroupe_"+file]=new L.markerClusterGroup({
        iconCreateFunction: function(cluster) {
            return new L.DivIcon({ 
              html: '<div style="color: white; background: '+color+'; border-radius:5px;  text-align: center; font-size: 18px;  box-shadow: 8px 8px 12px grey; border: 0.1px solid '+color+'; display: inline-block; vertical-align:middle;">' + cluster.getChildCount() +'</div>',
              iconSize: [0,0]
           });
        },
    }).addTo(map);
}           
my_objects["contactsGroupe_"+file].addLayer(my_objects["contacts_"+file]);
于 2016-09-21T12:45:28.210 回答
0

解决方案是放这样的东西

if (isChecked) {
color_html=$widget.data('colorhtml');
add_contacts(file);
}

add_contacts(file){
  my_objects["style_"+file]=style="color: white; background: '+color_html+'; border-radius:5px;  text-align: center; font-size: 18px;  box-shadow: 8px 8px 12px grey; border: 0.1px solid '+color_html+'; display: inline-block; vertical-align:middle;"'

  my_objects["contactsGroupe_"+file]=new L.markerClusterGroup({
    iconCreateFunction: function(cluster) {
        return new L.DivIcon({ 
          html: '<div '+ my_objects["style_"+file]+'>' + cluster.getChildCount() +'</div>',
          iconSize: [0,0]
       });
    },
}).addTo(map);
}           
my_objects["contactsGroupe_"+file].addLayer(my_objects["contacts_"+file]);
于 2016-09-21T09:40:58.390 回答