传单无法清除图层和标记

Question

我想从地图中删除所有标记并尝试使用 map.remove

删除标记

我正在使用 vue.js 和传单来显示地图我有一个对象来记录 lng 和 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,
        },
      ],
    },
  ],

和下面两个函数 initmap() //设置视图

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() //给出地图标记

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,
        });

     
  }
},

我的网站应该像这样工作首先 initmap() 然后 make_map()

我有一个按钮可以触发 make_map() 来更改纬度和经度

但旧标记并没有消失

我试过添加

this.mapp.remove() 到 make_map()
的顶部我收到错误消息

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

我已经尝试将它添加到 make_map 的顶部，没有出现错误

但没有清除标记

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

我看了很多清除地图的文章，但还是没用弄清楚为什么我无法清除或删除地图让我发疯

非常感谢

Answer 1

要从地图上删除所有标记，您必须先将它们存储在某个地方。
您可以将所有标记存储在一个数组中：

const markers = [];

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

要删除它们，您需要调用：

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

但如果您不需要删除特定标记，还有更好的方法，使用 LayerGroup()。
示例：

const layerGroup = new L.LayerGroup();

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

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

要删除所有标记，只需调用：map.removeLayer(layerGroup)

传单无法清除图层和标记

leaflet can not clear layer and marker

javascript

dictionary

web

leaflet

vue.js