如何通过Google Maps JS API自定义聚类实现标记改为紫色？

安全阿岳

2026-7-30

解决方案

1. 修改单个标记为紫色（匹配默认红色标记样式）

直接利用Google Maps Marker的icon属性，使用SVG矢量图标复刻默认红色标记的形状并替换为紫色。SVG是矢量格式，不会出现画质模糊或显示异常的问题。

修改标记创建代码：

marker = new google.maps.Marker({
    position: new google.maps.LatLng(locationObject.Latitude, locationObject.Longitude),
    map: map,
    title: hotelName,
    id: hotelid,
    // 紫色SVG图标，匹配默认红色标记的形状
    icon: {
        path: "M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z",
        fillColor: "#9370DB", // 可根据需求调整紫色色值
        fillOpacity: 1,
        strokeColor: "#000",
        strokeWeight: 2,
        scale: 1
    }
});

path参数对应默认红色标记的SVG路径，仅修改fillColor即可实现颜色替换，其他参数保持与默认标记一致。

2. 修改聚类标记为紫色（匹配单个标记样式）

在自定义renderer中，给聚类标记设置相同的紫色SVG图标，同时保留计数标签：

var renderer = {
    render: function (paramss) {
        return new google.maps.Marker({
            label: { text: String(paramss.count), color: "white", fontSize: "10px" },
            position: paramss.position,
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + paramss.count,
            // 聚类标记使用同款紫色图标，适当放大区分
            icon: {
                path: "M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z",
                fillColor: "#9370DB",
                fillOpacity: 1,
                strokeColor: "#000",
                strokeWeight: 2,
                scale: 1.5 // 放大聚类标记，与单个标记形成区分
            }
        });
    }
};