Come ottenere le icone di Google Map MarkerClusterer in un unico colore

Question

Qualcuno può farmi sapere come impostare MarkerClusterer plus per mostrare tutti i cluster in un colore? come puoi vedere, MarkerClusterer cambia automaticamente il colore dei cluster quando sono fuori da un intervallo, ma voglio ottenerli tutti in un solo colore?

Grazie

Answer 1

Hi i colori sono definiti dalle immagini che è venuto con i cluster.js presentare

Le immagini vanno da m1.png a m5.png:

Basta copiare le immagini e farle tutto il colore che vuoi

Answer 2

Ho avuto un problema simile. Soluzione: sviluppare una funzione con il parametro color che genera l'icona svg in linea. Non è così difficile da decodificare con forme di base: fonte

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:

<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>