如何用Marker Clusterer实现谷歌地图AdvancedMarkerElement的聚类？

问题说明 #

• 因需高度定制化标记样式，必须使用AdvancedMarkerElement，但无法与MarkerClusterer V3配合实现聚类功能
• 此前使用普通谷歌标记+内嵌SVG实现脉动动画圈，当标记数量超过200个时出现异常：SVG加载不稳定，控制台无报错信息
• 切换到AdvancedMarkerElement后，标记无法被聚类，控制台抛出MarkerClusterer V3的错误：t.getPosition() is not a function

代码示例 #

let markers = []
async function initMap(){ 
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const myLatLng = { lat: 37.7749, lng: -122.4194 };

    const map = new Map(document.getElementById('map'), {
        zoom: 13,
        center: myLatLng,
        mapId: 'DEMO_MAP_ID'
    });

    for (let i = 0; i <= 50; i++) {
        const randLat = myLatLng.lat + Math.random() * 0.1 - 0.05;
        const randLng = myLatLng.lng + Math.random() * 0.1 - 0.05;
        const latLng = new google.maps.LatLng(randLat, randLng);

        const marker = new AdvancedMarkerElement({
            position: latLng,
            map: map,
            content: buildContent()
        });

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

function buildContent() {
    const content = document.createElement("div");
    content.className = 'custom-marker-elem';
    content.innerHTML = 'Hello World!';
    return content;
}

报错信息 #

t.getPosition() is not a function 

解决方法 #

MarkerClusterer V3是针对传统google.maps.Marker设计的，它依赖标记对象具备getPosition()等标准方法，但AdvancedMarkerElement使用属性而非方法来获取位置，因此需要做兼容处理：

方法一：直接给实例添加兼容方法 #

手动为每个AdvancedMarkerElement实例补充getPosition()方法，让MarkerClusterer能识别：

const marker = new AdvancedMarkerElement({
    position: latLng,
    map: map,
    content: buildContent()
});
// 添加兼容方法
marker.getPosition = () => marker.position;
markers.push(marker);

方法二：用适配类封装 #

创建一个适配类，将AdvancedMarkerElement包装成符合MarkerClusterer期望的接口，方便批量使用：

class ClusterableAdvancedMarker {
    constructor(options) {
        this.marker = new AdvancedMarkerElement(options);
    }

    getPosition() {
        return this.marker.position;
    }

    setMap(map) {
        this.marker.map = map;
    }

    getMap() {
        return this.marker.map;
    }
}

// 创建标记时替换原逻辑
const marker = new ClusterableAdvancedMarker({
    position: latLng,
    map: map,
    content: buildContent()
});
markers.push(marker);

额外提示 #

如果MarkerClusterer还依赖其他方法（如setVisible、getVisible等），可在适配类或实例上补充对应方法，映射到AdvancedMarkerElement的属性或行为；同时建议使用最新版本的MarkerClusterer V3，旧版本对新API的兼容度更低。

内容的提问来源于stack exchange，提问作者Muhammad Usama