web-dev-qa-db-ja.com

新しいマーカーとレイヤーを追加する前に、すべてのマーカーとレイヤーのリーフレットマップをクリアする方法

私は休閑中のコードを持っています：

_    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);などを試してみましたが、古いマーカーが消えない

何か案は？

javascriptgoogle-mapsmapsleaflet
28
Patrioticcow

グループ内の現在のレイヤー（マーカー）をすべて削除する場合は、L.markerClusterGroup()のclearLayersメソッドを使用できます。参照はmarkersと呼ばれるため、以下を呼び出す必要があります。

markers.clearLayers();
39
iH8

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」に保存することもできます。

14
beije
map._panes.markerPane.remove();
2
Prayitno Ashuri