reactjs - 该项目未从 react-leaflet-markercluster 中完全删除
问题描述
我有这个任务:该程序有一个带有复选框的机器列表。如果复选框处于活动状态,则该机器应显示在地图上。为此,我有一个函数可以在地图上生成标记列表。但问题是,如果您选择一台机器并禁用它,机器会正确出现和消失,但是当您重新选择这台机器时,标记会重复。
PS 该函数正确生成标记。没有集群,一切正常。
const MarkerCluster = (props) => {
const createClusterCustomIcon = function (cluster) {
return L.divIcon({
html: `<span>${cluster.getChildCount()}</span>`,
className: "marker-cluster-custom",
iconSize: L.point(40, 40, true),
})
}
const generatorOfCars = useMemo(() => {
const arr = []
props.carList.forEach((group) =>
group.data.forEach((car) => {
if (props.carsOnMap.includes(car.id)) arr.push(car)
})
)
return arr
}, [props.carsOnMap, props.carList])
return (
<MarkerClusterGroup
showCoverageOnHover={false}
iconCreateFunction={createClusterCustomIcon}
>
{generatorOfCars.map((car) => (
<MapMarker key={car.id} car={car} />
))}
</MarkerClusterGroup>
)
}
export default MarkerCluster
解决方案
推荐阅读
- javascript - React-Firebase 与 webpack 未捕获的 std::bad_alloc 类型的异常:std::bad_alloc
- sql - ADQL 条件搜索
- linux - 关于cronjob执行时间
- python - 在 for loop python selenium web-driver 中运行 3 个变量以打印所有数据,包括链接
- vue.js - Cypress 监视 Vue 组件
- mongodb - mongodb中的数据库引用可以引用两个数据库吗?
- regex - 调整正则表达式代码以继续第一期 - 即使在下一行
- php - 使用 Codeigniter 4 电子邮件凭据
- json - JSON 发布到 url
- reactjs - 使用反应模式的 TinyMCE 编辑器中未显示下拉菜单