使用不同颜色添加markerClusterGroup

我正在处理我想要在markerClusterGroup中显示标记的地图，并且每个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之前进行每次缩放。

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

来源

2016-09-19 Creative Plus

凡变量'color_html'设置？也许你在创建一个新组时将它设置为较新的值，而旧组的功能在地图重置时会使用这个新值。 – Krxldfx

正如@Krxldfx所示，缺少关于'color_html'变量的信息。有一些机会你只是有一个_scoping_问题。请参阅[JavaScript闭包如何工作？]（https://stackoverflow.com/questions/111102/how-do-javascript-closures-work） – ghybs

@krxldfx我编辑了这个问题。 –

解决的办法是把这样的

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-21 09:40:58

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

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-21 12:45:28 Krxldfx

使用不同颜色添加markerClusterGroup

回答

相关问题