react leaflet updating markers

问题

hello I am a leaflet newbie, I am building my app with map component. the marker on the map should be updated every time the user perform specific action (filters) . the component was working fine . then I decided to add the responsive popup plugin from the original Leaflet. so I tweaked a lot the normal component of react leaflet . now every time I perform I new filters the new markers are added successfully to the map however the old marker are not deleted.

codesandbox demo

any help on how to fix this ?

回答1:

If you are not bound to that component (leaflet-responsive-popup) you can solve it like this (preferred solution): CodeSandbox without ResponsivePopup

<Marker key={i} position={bus}>
  <Popup>
    <span>Note<br />{i}</span>
  </Popup>
</Marker>

If you have to use that component than you have to store markers in an array and clear all the markers before you add new ones like this: CodeSandbox with ResponsivePopup Problem is that you were adding markers, while never removing the old ones. You have to pass all the coordinates so that first you could remove the old ones and than add the new ones.

来源：https://stackoverflow.com/questions/61873505/react-leaflet-updating-markers