创建新搜索时如何删除当前传单标记？

Question

我创建了这个组件，用于在搜索城市时显示标记，但是当我创建新搜索时，新标记已添加，但前一个未删除。您有解决此问题的想法吗？

import { useState, useEffect } from "react";

import { useMap } from "react-leaflet";
import "leaflet-control-geocoder/dist/Control.Geocoder.js";
import L from "leaflet";
import icon from "./../constants/homeIcon";

import { PrintAddress } from "../components/Map/styles";

const SearchBar = () => {
  const map = useMap();

  let [printInfo, setPrintinfo] = useState("");

  useEffect(() => {
    let geocoder = L.Control.Geocoder.nominatim({
      geocodingQueryParams: {
        limit: 3,
        addressdetails: 1,
        namedetails: 1,
        countrycodes: "fr",
      },
    });
    L.Control.geocoder({
      query: "",
      placeholder: "Search your address",
      defaultMarkGeocode: false,
      geocoder,
    })
      .on("markgeocode", function (e) {
        let latlng = e.geocode.center;
        L.marker(latlng, { icon })
          .bindPopup(e.geocode.name)
          .openPopup()
          .addTo(map);
        map.panTo(latlng);
        L.circle(latlng, {
          color: "#000",
          fillColor: "#7AEDAD",
          radius: 10000,
        }).addTo(map);
        setPrintinfo(e.geocode.name);
      })
      .addTo(map);
  }, [map]);

  return <PrintAddress className="printInfo">{printInfo}</PrintAddress>;
};
export default SearchBar;

Answer 1

在组件外部使用图层组来存储圆和标记，每次添加新标记时清除图层组并添加新的图层组以便下次添加另一个标记时能够将其删除。

 const layerGroup = L.layerGroup(); // init the empty layerGroup
    
    const SearchBar = () => {
      const map = useMap(); 
      ...
 L.Control.geocoder({
      query: '',
      placeholder: 'Search your address',
      defaultMarkGeocode: false,
      geocoder
    })
      .on('markgeocode', function (e) {
        layerGroup.clearLayers();  // lear the layerGroup from previous stored circle and marker
        let latlng = e.geocode.center;
        L.marker(latlng, { icon })
          .bindPopup(e.geocode.name)
          .openPopup()
          .addTo(layerGroup); // add the marker to the layerGroup

        map.panTo(latlng);

        L.circle(latlng, {
          color: '#000',
          fillColor: '#7AEDAD',
          radius: 10000
        }).addTo(layerGroup); // add the circle to th elayerGroup

        setPrintinfo(e.geocode.name);

        map.addLayer(layerGroup);  // here add the layerGroup to th emap
      })
      .addTo(map);
  }, [map]);

Demo

创建新搜索时如何删除当前传单标记？

How to delete the current leaflet marker when create new search?

leaflet

reactjs

react-leaflet