首页 > 解决方案 > 该项目未从 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

标签: reactjsreact-leafletleaflet.markercluster

解决方案


推荐阅读