Reactjs 删除所有divIcon'；然后从传单地图中恢复传单

当缩放级别<16时，我想从地图中删除所有divIcon

    <MapContainer className="leaflet-map" center={[latitude, longitude]}
        zoom={17} scrollWheelZoom={false}
        whenCreated={(map) => this.setState({ map })}>
        <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
    </MapContainer>

---

虽然我不完全理解如何添加标记以及从何处获得纬度、经度和名称，但您必须将标记存储在一个数组中，然后使用地图参照将其从地图中删除。 因此，如果我们考虑到当放大到等于或大于16的地图级别时，否则将使用相同的文本复制相同的标记，并且如果多次添加相同的文本，文本将变为粗体，则应执行类似的操作：

const markers = []; // here define an empty array
    
class Map extends Component {
      state = { map: null };
    
      componentDidUpdate(prevProps, prevState) {
        const { map } = this.state;
        map.on("zoomend", function () {
            var currentZoom = map.getZoom();
            console.log(currentZoom);
            if (currentZoom < 16) {
              markers.forEach((marker) => map.removeLayer(marker));
            } else {
              const marker = L.marker([latitude, longitude], {
                icon: new L.DivIcon({
                  className: "my-div-icon",
                  iconSize: [5, 5],
                  html: '<p class="my-div-span">' + name + "</p>"
                })
              });
              markers.push(marker);
              marker.addTo(map);
            }
        });
      }
   ...
 }

const markers=[]；//这里定义一个空数组
类映射扩展组件{
状态={map:null}；
componentDidUpdate（prevProps、prevState）{
const{map}=this.state；
map.on（“zoomend”，函数（）{
var currentZoom=map.getZoom（）；
console.log（currentZoom）；
如果（当前缩放<16）{
markers.forEach（（marker）=>map.removeLayer（marker））；
}否则{
常量标记=L.标记（[纬度，经度]{
图标：新的L.DivIcon({
类名：“我的div图标”，
iconSize:[5,5]，
html:“
”+name+“
”
})
});
标记器。推（标记器）；
marker.addTo（map）；
}
});
}
...
}

如果标记低于16，请删除所有存储的标记，否则将它们添加到地图和标记数组中

const markers = []; // here define an empty array
    
class Map extends Component {
      state = { map: null };
    
      componentDidUpdate(prevProps, prevState) {
        const { map } = this.state;
        map.on("zoomend", function () {
            var currentZoom = map.getZoom();
            console.log(currentZoom);
            if (currentZoom < 16) {
              markers.forEach((marker) => map.removeLayer(marker));
            } else {
              const marker = L.marker([latitude, longitude], {
                icon: new L.DivIcon({
                  className: "my-div-icon",
                  iconSize: [5, 5],
                  html: '<p class="my-div-span">' + name + "</p>"
                })
              });
              markers.push(marker);
              marker.addTo(map);
            }
        });
      }
   ...
 }