Leaflet MarkerClusterGroup无法工作，报错layer.addEventParent is not a function

错误原因 #

你遇到的错误是因为调用markerClusters.addLayer(markers)时，传入了数组markers，但addLayer方法仅支持传入单个Leaflet Layer对象，不接受数组。当方法尝试把数组当作Layer实例处理时，会调用不存在的addEventParent方法，从而抛出错误。

修复方案 #

有两种可行的修复方式：

方式1：使用addLayers（复数）方法批量添加

将markerClusters.addLayer(markers)替换为markerClusters.addLayers(markers)，addLayers方法专门用于批量传入Layer数组：

const markerClusters = new MarkerClusterGroup();
const clusters = [];
const markers = [];
const customIcon = new L.Icon({
    iconUrl: "https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png",
    iconSize: [25, 41]
});

onMounted(()=>{
    markerClusters.clearLayers();
    toRaw(props.coordinatesTwo).forEach((item)=> {
        let marker = L.marker(new L.LatLng(item.coordinates.lat, item.coordinates.lng), {
            icon: customIcon
        })
        markers.push(marker)
    })
    // 改用addLayers批量添加标记数组
    markerClusters.addLayers(markers)
    props.map.leafletObject.addLayer(markerClusters);
})

方式2：循环逐个添加标记

直接在forEach循环内调用addLayer添加单个标记（你代码中已注释的逻辑）：

const markerClusters = new MarkerClusterGroup();
const clusters = [];
const markers = [];
const customIcon = new L.Icon({
    iconUrl: "https://unpkg.com/leaflet@1.5.1/dist/images/marker-icon.png",
    iconSize: [25, 41]
});

onMounted(()=>{
    markerClusters.clearLayers();
    toRaw(props.coordinatesTwo).forEach((item)=> {
        let marker = L.marker(new L.LatLng(item.coordinates.lat, item.coordinates.lng), {
            icon: customIcon
        })
        markers.push(marker)
        // 逐个添加到集群
        markerClusters.addLayer(marker);
    })
    props.map.leafletObject.addLayer(markerClusters);
})

补充说明 #

Leaflet的MarkerClusterGroup继承自LayerGroup，其API明确区分了单个添加（addLayer）和批量添加（addLayers）的方法，使用时需注意参数类型匹配。

内容的提问来源于stack exchange，提问作者Vardges Qeshishyan