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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28636723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 02:10:07  来源:igfitidea点击:

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

javascriptgoogle-mapsmapsleaflet

提问by Patrioticcow

I have the fallowing code:

我有空闲代码:

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

I initially call this function and it will add all eventsto the map with markers and clusters.

我最初调用此函数,它将所有内容添加events到带有标记和集群的地图中。

at some lather point i pass in some other events, the map will zoom in to the new events but the old ones are still on the map.

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

I've tried this.map.removeLayer(markers);and some other stuff, but I can't get the old markers to disappear

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

Any ideas?

有任何想法吗?

回答by iH8

If you want to remove all the current layers (markers) in your group you can use the clearLayersmethod of L.markerClusterGroup(). Your reference is called markersso you would need to call:

如果要删除组中的所有当前图层(标记),可以使用 的clearLayers方法L.markerClusterGroup()。您的参考被调用,markers因此您需要调用:

markers.clearLayers();

回答by beije

You're losing the marker reference because it's set with var. Try saving the references to 'this' instead.

您正在丢失标记引用,因为它是用 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);
    });
    [...]
}

Then later when you need to remove the markers run:

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

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

Alternatively, instead of saving each reference to each marker, you can just save the cluster to 'this'.

或者,您可以将集群保存到“this”,而不是保存对每个标记的每个引用。

回答by Prayitno Ashuri

map._panes.markerPane.remove();

回答by Juicyjames

I used a combination of the two best answers here from beije and Prayitno Ashuri.

我在这里结合了 beije 和 Prayitno Ashuri 的两个最佳答案。

Saving the markers to "this" so we can reference it later.

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

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

and then just removing the markers.

然后只需删除标记。

this.markers.remove()