Google Map MarkerClusterer Plus-Symbole In Einer Farbe

Kann jemand bitte lassen Sie mich wissen, wie man MarkerClusterer plus zeigen alle Cluster in Einer Farbe? wie Sie sehen können die MarkerClusterer ändert automatisch die Farbe der Cluster, wenn Sie auf einen Bereich, aber ich möchte Sie alle in einer Farbe?

Dank

InformationsquelleAutor Suffii | 2015-01-27

google-maps-api-3 markerclusterer

5

Hallo, die Farben sind definiert durch die Bilder das kam mit der cluster.js Datei

Ihre Bilder werden im Bereich von m1.png zu m5.png:

Kopieren Sie einfach die Bilder und damit Sie alle die Farbe, die Sie wollen
- wenn Ihr gehen, um nach unten abstimmen erklären Sie Ihren Gedankengang dahinter.
InformationsquelleAutor loan.burger

Hatte ich ähnliches problem. Lösung: entwickeln Sie eine Funktion mit parameter Farbe, die erzeugt inline-svg-Symbol. Es ist nicht so schwer zu reverse Engineering es mit Grundformen:

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

HTML:

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

Perfekt, vielen Dank! Mein Problem gelöst, wenn nur entdecken, warum all meine cluster-icons waren verschwunden.
Das ist großartig, und hat mich gerettet eine Menge Arbeit. Aber der Kommentar von "bis zu 5" für die Formatvorlagen nicht richtig, denke ich. Sie müssen möglicherweise ändern, wie sich die verschiedenen cluster-Größe bestimmt werden (mit markerCluster.setCalculator). Aber das macht nur Tomasz Antwort noch besser!
Tolle Lösung! Danke!
Dude, wenn ich fand diese früher hätten Sie rette mich 3 Stunden ärger. Ich danke Ihnen so sehr. Sie wirklich den Tag gerettet heute
Absolut Super!!!
Aber Bedenken Sie, verwenden Sie es nur für cluster-hintergrund-Bilder, nicht für Marker, verwenden Sie die img-Tags da diese nicht im IE funktioniert

InformationsquelleAutor Tomasz Rozmus

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.