Vue2+Leaflet MarkerCluster中iconCreateFunction偶现className未定义问题求助

你遇到的cssCluster偶尔变为undefined的问题，核心原因是地图缩放触发集群重组时，部分子标记的icon实例还未完全初始化，或是Vue动态绑定的className还未同步到Leaflet的icon.options中。这种无规律出现的情况，是因为缩放时集群重组时机和Vue响应式更新时机不完全匹配导致的。

1. 防御性取值，避免报错 #

直接在取值时添加可选链操作，防止因层级属性不存在引发的undefined问题：

iconCreateClsPrg (marker_cluster) {
  let nbSelected = 0;
  const childs = marker_cluster.getAllChildMarkers();
  childs.forEach(child => {
    // 用可选链避免层级属性缺失的问题
    const cssCluster = child.options?.icon?.options?.className;
    if (cssCluster?.includes(this.css_marker_selected_simple)) {
      nbSelected++;
    }
  });
  // ...后续逻辑
}

2. 将className存入Marker自定义属性（更可靠） #

既然依赖icon.options.className不稳定，不如直接把需要的类名存在Marker的自定义配置里，绕开Icon的异步初始化问题：

• 模板中给l-marker添加自定义属性：

<v-marker-cluster :options="{ iconCreateFunction: iconCreateClsPrg}">
  <l-marker 
    :options="{ customClassName: programme.display ? 'custom-marker notDisplay' : 'custom-marker display' }"
    ....> 
    <l-icon :class-name="programme.display ? 'custom-marker notDisplay' : 'custom-marker display'">
  </l-marker>
</v-marker-cluster>

• 在iconCreateClsPrg中直接读取自定义属性：

iconCreateClsPrg (marker_cluster) {
  let nbSelected = 0;
  const childs = marker_cluster.getAllChildMarkers();
  childs.forEach(child => {
    // 直接读取Marker自定义属性，无需依赖Icon
    const cssCluster = child.options?.customClassName;
    if (cssCluster?.includes(this.css_marker_selected_simple)) {
      nbSelected++;
    }
  });
  // ...后续逻辑
}

3. 确保Marker添加前Icon已初始化 #

如果是Icon动态绑定导致的延迟，可以在Vue的nextTick中再执行Marker的创建和添加逻辑，确保Icon配置已同步：

// 假设你在某个方法中添加Marker
addMarkers() {
  this.$nextTick(() => {
    // 这里执行Marker的创建与添加操作
  });
}

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