VueJs集成Leaflet添加标记出现双标记问题求助

常见原因及对应解决方法 #

1. 地图初始化逻辑重复执行 #

Vue组件的mounted钩子可能因组件重复挂载、路由重渲染等情况被多次触发，导致每次都重新创建地图并添加Marker，最终出现重复标记。

解决方式：
在组件data中添加初始化状态标记，避免重复执行地图初始化代码：

data() {
  return {
    map: null,
    isMapInitialized: false // 新增状态标记
  }
},
mounted() {
  if (this.isMapInitialized) return;
  this.isMapInitialized = true;

  this.map = L.map("mapContainer").setView([51.1657, 10.4515], 6.4);
  L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
    attribution:
      '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
  }).addTo(this.map);
  
  // 自定义Pane代码（当前Marker未用到该Pane，若无需可移除）
  var customPane = this.map.createPane("customPane");
  customPane.style.zIndex = 399;

  // 添加Marker
  L.marker([51.715019, 8.751960]).addTo(this.map).bindPopup('Machine 102').openPopup();
  L.marker([48.1351, 11.5820]).addTo(this.map).bindPopup('Machine 101').openPopup();
}

2. 页面存在多个相同ID的地图容器 #

L.map("mapContainer")通过ID选择DOM元素，若页面中有多个id="mapContainer"的元素，会导致地图被多次初始化，Marker被添加到不同地图实例上。

解决方式：
确保页面仅有一个id="mapContainer"的元素，或改用Vue的ref获取元素更可靠：

<template>
  <div ref="mapContainer"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      isMapInitialized: false
    }
  },
  mounted() {
    if (this.isMapInitialized) return;
    this.isMapInitialized = true;
    
    this.map = L.map(this.$refs.mapContainer).setView([51.1657, 10.4515], 6.4);
    // 后续初始化代码不变...
  }
}
</script>

3. 其他逻辑重复添加Marker #

检查组件的watch钩子、其他方法中是否存在重复执行添加Marker的代码，确保Marker仅被添加一次。

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