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

Posted 2023-02-23

【中文标题】以一种颜色获取 Google Map MarkerClusterer Plus 图标

【英文标题】：Getting Google Map MarkerClusterer Plus Icons In One Color

【发布时间】：2015-03-26 12:23:36

【问题描述】：

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

谢谢

【参考方案1】：

您可以通过以下方式添加/设置样式：

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

【参考方案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>

【讨论】：

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

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

很好的解决方案！谢谢！

老兄，如果我早点发现这个，你就可以为我节省 3 个小时的愤怒。太感谢了。你今天真的拯救了这一天

太棒了！

【参考方案3】：

您好，颜色由 cluster.js 文件附带的图像定义

您的图片范围从 m1.png 到 m5.png：

只需复制图像并使其成为您想要的所有颜色

【讨论】：

如果您要投反对票，请解释您的理由。