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

Question

加载地图后，图钉和标记簇图标都可见。只有在放大到最大后，所有的针脚都会断开，并且集群开始按预期工作，然后缩小。

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

当前设置：

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)

加载地图时，我看到创建的图钉（应包含在 markerCluster 中）和显示图钉计数的群集图标：

第一次缩放后：

一如既往，非常感谢任何指导和帮助，在此先感谢！

Answer 1

只是不要将您的标记添加到地图（或添加到地图的任何其他图层组），而仅添加到您的 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)

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

Leaflet markercluster markers and cluster icons both visible on load

javascript

leaflet

leaflet.markercluster