如何在添加新标记和图层之前清除所有标记和图层的传单地图？

Question

我有以下代码：

map: function (events) {
    var arrayOfLatLngs = [];
    var _this = this;

    // setup a marker group
    var markers = L.markerClusterGroup();

    events.forEach(function (event) {
        // setup the bounds
        arrayOfLatLngs.push(event.location);

        // create the marker
        var marker = L.marker([event.location.lat, event.location.lng]);

        marker.bindPopup(View(event));

        // add marker
        markers.addLayer(marker);
    });

    // add the group to the map
    // for more see https://github.com/Leaflet/Leaflet.markercluster
    this.map.addLayer(markers);

    var bounds = new L.LatLngBounds(arrayOfLatLngs);
    this.map.fitBounds(bounds);
    this.map.invalidateSize();
}

我最初调用此函数，它会将所有 events 添加到带有标记和簇的地图中。

在一些泡沫点我传递了一些其他事件，地图将放大到新事件但旧事件仍在地图上。

我试过 this.map.removeLayer(markers); 和其他一些东西，但我无法让旧标记消失

有什么想法吗？

Answer 1

您正在丢失标记引用，因为它是用 var 设置的。尝试保存对 'this' 的引用。

mapMarkers: [],
map: function (events) {
    [...]
    events.forEach(function (event) {
        [...]
        // create the marker
        var marker = L.marker([event.location.lat, event.location.lng]);
        [...]
        // Add marker to this.mapMarker for future reference
        this.mapMarkers.push(marker);
    });
    [...]
}

然后当您需要删除标记时运行:

for(var i = 0; i < this.mapMarkers.length; i++){
    this.map.removeLayer(this.mapMarkers[i]);
}

或者，您可以将集群保存到 'this'。

，而不是保存对每个标记的每个引用。

Answer 2

如果要删除组中的所有当前层（标记），可以使用 L.markerClusterGroup() 的 clearLayers 方法。您的参考名为 markers，因此您需要致电：

markers.clearLayers();

Answer 3

map._panes.markerPane.remove();

Answer 4

我结合使用了 beije 和 Prayitno Ashuri 的两个最佳答案。

将标记保存到 "this" 以便我们稍后参考。

this.marker = L.marker([event.location.lat, event.location.lng]);

然后只是删除标记。

this.markers.remove()

Answer 5

您可以清除所有标记而不保存它

map.eachLayer((layer) => {
  layer.remove();
});

来自 https://leafletjs.com/reference-1.0.3.html#map-event

Answer 6

$(".leaflet-marker-icon").remove();
$(".leaflet-popup").remove();

如何在添加新标记和图层之前清除所有标记和图层的传单地图？

How to clear leaflet map of all markers and layers before adding new ones?

javascript

maps

google-maps

leaflet