如何将Google Map中默认蓝色的聚合标记（Cluster）改为红色

你的代码问题出在聚合样式的配置逻辑上，以下是具体修正方案：

核心问题分析 #

你当前使用了transparent.png作为聚合标记的底图，同时设置的color: "red"并非控制聚合标记背景色的正确参数，且透明底图会覆盖颜色设置，导致红色无法正常显示。

修正后的代码配置 #

方案1：用内置样式生成红色聚合标记 #

若你使用的是新版@googlemaps/markerclusterer，可直接通过styles配置正确属性实现红色标记：

var options = {
    maxZoom: 15,
    styles: [
        {
            textColor: "#fff",
            backgroundColor: "red",
            borderRadius: "50%",
            width: 53,
            height: 53,
            textSize: 16,
            // 可选：添加白色边框增强视觉效果
            borderColor: "#fff",
            borderWidth: 2
        }
    ]
};

const markerCluster = new markerClusterer.MarkerClusterer({
    map,
    markers,
    options
});

方案2：使用自定义红色图标图片 #

如果需要用自定义图片作为聚合标记，直接替换url为红色聚合图标地址即可：

var options = {
    maxZoom: 15,
    styles: [{
        url: "你的红色聚合图标URL", // 替换为实际的红色标记图片地址
        width: 53,
        height: 53,
        textColor: "#fff",
        textSize: 16
    }]
};

const markerCluster = new markerClusterer.MarkerClusterer({
    map,
    markers,
    options
});

适配旧版MarkerClustererPlus的配置 #

若你使用的是旧版MarkerClustererPlus，需改用对应属性名：

var options = {
    maxZoom: 15,
    styles: [{
        url: 'https://maps.gstatic.com/mapfiles/transparent.png',
        width: 53,
        height: 53,
        textColor: '#fff',
        fillColor: 'red', // 背景填充色
        fillOpacity: 1,
        strokeColor: '#fff',
        strokeWidth: 2
    }]
};

const markerCluster = new markerClusterer.MarkerClusterer({
    map,
    markers,
    options
});

关键注意点 #

• 移除原代码中无效的color: "red"属性，改用对应版本的正确属性名；
• 若使用透明底图配合颜色填充，需确保填充色属性生效（如旧版的fillColor、新版的backgroundColor）。

内容的提问来源于stack exchange，提问作者Syed Yazdan