加载 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 时,我会看到创建的图钉(应包含在标记簇中)和显示图钉计数的簇图标:
第一次缩放后:
一如既往,我们非常感谢任何指导和帮助,所以提前致谢!
最佳答案
不要将标记添加到 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)
关于javascript - 传单标记群集标记和群集图标在加载时均可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54485131/