異なる色のmarkerClusterGroupを追加します

Question

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が表示され、2番目のファイルを選択すると、背景色が異なる2番目のマーカーClusterGroupが表示されますが、拡大または縮小すると、同じ背景色（最後に選択した色と同じもの）と、最初のズームに戻ったときの色は2種類あります。 異なる色で背景色を変えたい場合は、最初のmarkerClusterGroupを追加した後、2番目のmarkerClusterGroupを追加する前にズームする必要があります。

誰かがこの問題を理解するのを助けることができます。 thnx

Answer 1

ソリューションは、この

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]); 

Answer 2

のようなものを置くことですまた、あなたの関数のパラメータとして色を追加することができます。

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]);