在Google地图MarkerClusterer Plus中如何获取单色图标？

Question

请问有人知道如何设置MarkerClusterer Plus将所有聚类显示为一种颜色吗？如您所见，当聚类超出范围时，MarkerClusterer会自动更改聚类的颜色，但我希望它们全部以一种颜色显示。

谢谢

- Suffii

Answer 1

我曾经遇到过类似的问题。解决方法是开发一个带有颜色参数的函数，它可以生成内联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源代码:

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

- Tomasz Rozmus

---

太好了，谢谢！我刚发现为什么所有的集群图标都消失了，问题解决了。 - MrLewk

这真是太好了，省去了我很多工作。但我认为“最多5个”样式的评论是不正确的。您可能需要更改不同群集大小的确定方式（使用markerCluster.setCalculator）。但这只会让Tomasz的回答更好！ - Chud

太棒了！谢谢！ - Michael Lynch

绝对棒极了！ - Hrvoje Golcic

但请记住，仅将其用于集群背景图像，而不是使用img标记的标记，因为这在IE中无法正常工作。 - Hrvoje Golcic

Answer 2

嗨，颜色是由随 cluster.js 文件提供的图像定义的

您的图像将从 m1.png 到 m5.png 范围内：

只需复制这些图像并使它们全部变成您想要的颜色即可

- TResponse

---

如果你要给一个负评，请解释一下你的原因。 - TResponse

Answer 3

您可以按照以下方式添加/设置样式：

import MarkerClusterer from '@google/markerclustererplus';

let cluster = new MarkerClusterer(
                  map, 
                  markers, 
                  {
                    styles: [
                       MarkerClusterer.withDefaultStyle({
                        width: 50,
                        height: 50,
                        anchorIcon: [0, 0],
                        anchorText: [2, 2],
                        url: '/assets/img/m2.png', // This refers to local
                                                   // path of marker's image 
                        textColor: '#ffffff',
                        textSize: 10,
                      }),
                    ],
                  }
);

- Ray Dragon