javascript - 传单标记群集标记和群集图标在加载时均可见

Question

加载 map 后，图钉和标记簇图标均可见。只有在缩放到最大后，所有引脚才会断开，并且簇在缩小时开始按预期工作。

我做错了什么会导致此问题？

当前设置:

const markerCluster = Leaflet.markerClusterGroup({showCoverageOnHover: false})

//within a loop the markers are created:

() => {
  const pinBackground = item.current ? '#db2828' : '#3dcc4a'
  const interior = item.pin.icon_url
    ? `<img style="background: ${item.pin.color_code}" src=${item.pin.icon_url}>`
    : `<div class="mapPanelAbbreviation" style="background: ${item.pin.color_code}">${item.pin.abbreviation}</div>`
  const pinLayout = `<div class="mapPanelIconContainer" style="background:${pinBackground}">
      ${interior}
    </div>`

  let marker = Leaflet.marker(coord, {icon: Leaflet.divIcon({html: pinLayout})})
    .bindPopup(`<p class='pinText'>${item.taskId}</p><p class='pinDetails'>${item.title}</p>`)
    .addTo(this.currentMap)
    .addTo(this.markerGroup)

  markerCluster.addLayer(marker)
}

//then the markerCluster is added to the map

this.currentMap.addLayer(markerCluster)

加载 map 时，我会看到创建的图钉(应包含在标记簇中)和显示图钉计数的簇图标:

第一次缩放后:

一如既往，我们非常感谢任何指导和帮助，所以提前致谢!

Answer 1

不要将标记添加到 map (或添加到 map 的任何其他图层组)，而仅添加到 MarkerClusterGroup:

let marker = Leaflet.marker(coord, {icon: Leaflet.divIcon({html: pinLayout})})
  .bindPopup(`<p class='pinText'>${item.taskId}</p><p class='pinDetails'>${item.title}</p>`)
  //.addTo(this.currentMap) // this duplicates your Markers
  //.addTo(this.markerGroup) // this also duplicates if markerGroup is added to map

markerCluster.addLayer(marker)