以一种颜色获取 Google Map MarkerClusterer Plus 图标

Question

有人可以告诉我如何设置 MarkerClusterer plus 以一种颜色显示所有簇吗？如您所见，MarkerClusterer 会在簇超出范围时自动更改簇的颜色，但我想让它们全部为一种颜色？

谢谢

Answer 1

您好，颜色由 cluster.js 文件

附带的图像定义

您的图片范围从 m1.png 到 m5.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 来源：

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

Answer 3

您可以add/set按以下方式设置样式：

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

以一种颜色获取 Google Map MarkerClusterer Plus 图标

Getting Google Map MarkerClusterer Plus Icons In One Color

google-maps-api-3

markerclusterer