Vue3 Leaflet Marker Cluster操作报错：无法读取'lat'属性

在Vue3项目中实现MarkerCluster功能，页面加载时集群显示正常，但点击集群、缩放或拖动地图时，控制台抛出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'lat') LngBounds.js:192。相关代码及依赖版本如下：

核心代码片段 #

<marker-cluster :options="{ showCoverageOnHover: false, chunkedLoading: true }">
    <!-- 所有俱乐部标记 -->
    <l-marker v-for="club in clubs" :key="club.name" class="clubMarker" :lat-lng="[club.latitude, club.longitude]" 
    @click="showClubPopup(club.latitude, club.longitude, club.orgName, (club.adr1+' '+club.adr2))">
        <l-icon
            :id="club.name"
            :icon-anchor="[13,40]"
            icon-url="src/assets/svg/club_pin.svg" >
        </l-icon>
    </l-marker>
</marker-cluster>

注：<marker-cluster>组件复制自开源示例的MarkerCluster.vue文件。

项目npm依赖版本 #

"axios": "^1.3.5",
"leaflet.markercluster": "^1.5.3",
"node.js": "^0.0.1-security",
"npm": "^9.6.5",
"patch-package": "^7.0.0",
"vue": "^3.2.47",
"vue-router": "^4.1.6",
"@vitejs/plugin-vue": "^4.2.1",
"@vue-leaflet/vue-leaflet": "^0.6.1",
"@vue/cli-plugin-router": "~5.0.0",
"leaflet": "^1.9.3",
"vite": "^4.1.0"

可能的问题原因及解决方案 #

• 数据合法性校验：检查clubs数组中是否存在latitude或longitude为undefined/null的条目。Leaflet计算集群边界时，非法坐标会导致LngBounds初始化失败，触发该错误。可通过过滤数据（比如clubs.filter(item => item.latitude && item.longitude)）确保所有标记坐标合法。
• 组件兼容性问题：复制的MarkerCluster组件可能适配的是旧版@vue-leaflet/vue-leaflet，当前0.6.1版本的API逻辑存在差异。建议改用官方推荐的MarkerCluster集成方式，或修改组件内部代码，确保传递给Leaflet的坐标始终是合法的LatLng对象（比如手动转换为L.latLng()实例）。
• 依赖版本冲突：leaflet.markercluster@1.5.3与leaflet@1.9.3可能存在版本适配问题。尝试降级leaflet到1.7.x系列，或升级leaflet.markercluster至最新稳定版，验证错误是否消失。
• 异步数据加载时机：若clubs是异步获取的数据，需确保数据完全加载后再渲染MarkerCluster组件。可通过v-if="clubs?.length"包裹组件，避免在数据未就绪时渲染标记。

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