एक रंग में Google Map MarkerClusterer प्लस आइकन प्राप्त करना

Question

क्या कोई मुझे बता सकता है कि मार्करक्लस्टरर प्लस को एक क्लस्टर में सभी क्लस्टर दिखाने के लिए कैसे सेट करें? जैसा कि आप देख सकते हैं कि मार्करक्लस्टरर क्लस्टर के रंग को स्वचालित रूप से बदलता है जब वे एक सीमा पर होते हैं लेकिन मैं उन्हें एक रंग में प्राप्त करना चाहता हूं?

धन्यवाद

Answer 1

हाय रंग छवियों जो cluster.js के साथ आया था द्वारा परिभाषित कर रहे दायर

आपकी छवियों m5.png को m1.png से लेकर जाएगा:

बस छवियों की प्रतिलिपि बनाएं और उन्हें वह रंग बनाएं जो आप चाहते हैं

Answer 2

मुझे भी इसी तरह की समस्या थी। समाधान: रंग पैरामीटर के साथ एक फ़ंक्शन विकसित करें जो इनलाइन svg आइकन उत्पन्न करता है। यह बुनियादी आकार के साथ इंजीनियर को बदलने का इतना मुश्किल नहीं है:

var getGoogleClusterInlineSvg = function (color) { 
     var encoded = window.btoa('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -100 200 200"><defs><g id="a" transform="rotate(45)"><path d="M0 47A47 47 0 0 0 47 0L62 0A62 62 0 0 1 0 62Z" fill-opacity="0.7"/><path d="M0 67A67 67 0 0 0 67 0L81 0A81 81 0 0 1 0 81Z" fill-opacity="0.5"/><path d="M0 86A86 86 0 0 0 86 0L100 0A100 100 0 0 1 0 100Z" fill-opacity="0.3"/></g></defs><g fill="' + color + '"><circle r="42"/><use xlink:href="#a"/><g transform="rotate(120)"><use xlink:href="#a"/></g><g transform="rotate(240)"><use xlink:href="#a"/></g></g></svg>'); 

     return ('data:image/svg+xml;base64,' + encoded); 
    }; 

var cluster_styles = [ 
     { 
      width: 40, 
      height: 40, 
      url: getGoogleClusterInlineSvg('blue'), 
      textColor: 'white', 
      textSize: 12 
     }, 
     { 
      width: 50, 
      height: 50, 
      url: getGoogleClusterInlineSvg('violet'), 
      textColor: 'white', 
      textSize: 14 
     }, 
     { 
      width: 60, 
      height: 60, 
      url: getGoogleClusterInlineSvg('yellow'), 
      textColor: 'white', 
      textSize: 16 
     } 
     //up to 5 
    ]; 

//... 

markerClusterer = new MarkerClusterer(map, markers, { 
      //... 
      styles: cluster_styles 
     }); 

एसवीजी स्रोत:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -100 200 200"> 
 
    <defs> 
 
     <g id="a" transform="rotate(45)"> 
 
      <path d="M0 47A47 47 0 0 0 47 0L62 0A62 62 0 0 1 0 62Z" fill-opacity="0.7"/> 
 
      <path d="M0 67A67 67 0 0 0 67 0L81 0A81 81 0 0 1 0 81Z" fill-opacity="0.5"/> 
 
      <path d="M0 86A86 86 0 0 0 86 0L100 0A100 100 0 0 1 0 100Z" fill-opacity="0.3"/> 
 
     </g> 
 
    </defs> 
 
    <g fill="#004b7a "> 
 
     <circle r="42"/> 
 
     <g> 
 
      <use xlink:href="#a"/> 
 
     </g> 
 
     <g transform="rotate(120)"> 
 
      <use xlink:href="#a"/> 
 
     </g> 
 
     <g transform="rotate(240)"> 
 
      <use xlink:href="#a"/> 
 
     </g> 
 
    </g> 
 
</svg>