React - 传单去除标记

Question

我正在尝试在我的地图中添加和删除标记，但在尝试删除它们时遇到了问题。用户点击地图并放置任意数量的标记。当他单击特定标记的弹出窗口时，他可以将其删除。例如，如果用户放置了 3 个标记并想删除第二个，当他这样做时，第二个 和第三个标记从地图上消失。。我将坐标存储在使用状态挂钩中，虽然我在删除标记时正确更新了数组，但标记似乎没有正确重新渲染。你知道哪里出了问题吗？

非常感谢:)

这是添加标记组件

function AddMarker() {

const [coord, setPosition] = useState([]);

const map = useMapEvents({
    click: (e) => {   
        setPosition([...coord,e.latlng])
        const mark = e
     },   
})

useEffect(() => {
  console.log( coord);
}, [coord]);


const removeMarker = (index, map) => {
  map.eachLayer((layer) => {
    if (layer.options && layer.options.pane === "markerPane") {
      if (layer.options.uniceid === index) {
        console.log(layer.options.uniceid)
        console.log(index)
        map.removeLayer(layer);
        var array = [...coord];
        array.splice(index, 1);
        setPosition(array)

        console.log(array)
        
        //coord.splice(index,1);
        //setPosition(coord=> [...coord]);
        //console.log(coord)

      }
    }
  });
}

return (
  
    <div>
    {coord.map((pos, idx) =>
        <Marker key={`marker-${idx}`} uniceid={idx} position={pos} icon ={blue} draggable={true} eventHandlers={{
            click: (e) => {console.log(e.latlng)},}}>
        <Popup>
            <PopupForm data ={pos} id={idx} formData={() => removeMarker(idx, map)}></PopupForm>
        </Popup>
      </Marker>

    )}
    </div>   
); }

Answer 1

您不需要像以前那样遍历每个地图层。您只需要过滤掉点击标记的坐标，使其不再包含在您的状态变量中即可！

这是一个简化的例子，弹出窗口中有一个普通按钮

const removeMarker = (pos) => {
        setPosition((prevCoord) =>
          prevCoord.filter(
(prevCoord) => prevCoord.filter((coord) => JSON.stringify(coord) !== JSON.stringify(pos))
            // or (coord) => coord.lat !== pos.lat && coord.lng !== pos.lng 
          )
        );
};
...
return (
          <div>
              {coord.map((pos, idx) => (
                <Marker
                  key={`marker-${idx}`}
                  position={pos}
                  draggable={true}
                  eventHandlers={{
                    click: (e) => {
                      console.log(e.latlng);
                    }
                  }}
                >
                  <Popup>
                    <button onClick={() => removeMarker(pos)}>Remove marker</button>
                  </Popup>
                </Marker>
              ))}
          </div>
 );

Demo

React - 传单去除标记

React - Leaflet removing marker

javascript

markers

reactjs

react-leaflet

react-hooks