leaflet can not clear layer and marker-CodePudding

i want to remove all marker s from map and trying to remove markers with map.remove

i am using vue.js with leaflet to show map i got a object to record lng and lat

router_planning: [
    {
      car: [
        {
          name: "001",
          lat: 25.042474,
          lng: 121.513729,
        },
        {
          name: "002",
          lat: 24.982474,
          lng: 121.613729,
        },
        {
          name: "003",
          lat: 24.894474,
          lng: 121.623729,
        },
      ],
    },
    {
      car: [
        {
          name: "004",
          lat: 24.982474,
          lng: 121.513729,
        },
        {
          name: "005",
          lat: 24.882474,
          lng: 121.513729,
        },
        {
          name: "006",
          lat: 24.982474,
          lng: 121.713729,
        },
      ],
    },
  ],

and two function below initmap() //set view

initmap() {
  this.mapp = L.map("map");
  this.mapp.setView(
    [
      this.router_planning[0].car[0].lat,
      this.router_planning[0].car[0].lng,
    ],
    10
  ); 
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 13, 
    minZoom: 9,
  }).addTo(this.mapp);
},

make_map() //give map marker

make_map() {
  for (let i = 0; i < this.router_planning.length; i  ) {
    for (let j = 0; j < this.router_planning[i].car.length; j  ) {
      L.circleMarker(
        [
          this.router_planning[i].car[j].lat,
          this.router_planning[i].car[j].lng,
        ],
        {
          color: this.circle_marker[i],
          fillColor: this.circle_marker[i],
          fillOpacity: 1,
          radius: (i   1) ** 2,
        }
      )
        .addTo(this.mapp)
        .bindTooltip(this.router_planning[i].car[j].name.toString(), {
          permanent: true,
        });

     
  }
},

my web should work like this first initmap() then make_map()

i got a button to trigger make_map() to change lat and lng

but old marker didn't disappear

i have tried add

this.mapp.remove() to the top of make_map()
i got error message

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'appendChild')

i have tried add this to top of make_map with no error

but didnt clear marker

var container = L.DomUtil.get('map');
    container._leaflet_id = null;

i have watched many article to clear map but still didn't work it's make me crazy to find out why i can't clear or remove map

thanks alot

CodePudding user response：

To remove all markers from the map you must first store them somewhere.
You can store all markers inside of an array:

const markers = [];

const marker = L.circleMarker([...])
        .bindTooltip([...])
        .addTo(map);
markers.push(marker);

And to remove them you need to call:

for(let i = 0; i < markers.length; i  ) {
    map.removeLayer(marker[i]);
}

But there's a better way to do it if you don't need to remove specific marker, use LayerGroup().
Example:

const layerGroup = new L.LayerGroup();

const marker = new L.marker([...]).addTo(layerGroup);

//after you've added all markers to layerGroup():
map.addLayer(layerGroup)

And to remove all markers simply call: map.removeLayer(layerGroup)