web-dev-qa-db-ja.com

MapBoxは現在のマーカーをすべてクリアします

MapBoxインスタンスを作成しました：

var map = new mapboxgl.Map({
    container : 'map',
    style : 'mapbox://styles/mapbox/streets-v9'
});

すべてのマーカーをクリアする必要があり、それぞれにmap.remove（marker）などを試しましたが、何も機能しないようです。

地図からすべてのマーカーをクリアする単純な関数呼び出しはありますか？

編集： マップからすべてのレイヤーと機能を削除する方法？ とは異なります。

javascriptmapboxmapbox-gl-js
9
HomerPlata

これを見た？ https://www.mapbox.com/mapbox-gl-js/api/#marker#remove

Map.removeの代わりに、おそらくmarker.removeを試してください：

var marker = new mapboxgl.Marker().addTo(map);
marker.remove();
19
Andi-lo

複数のマーカーを追加し、それらをマップ上ですべてクリアしたい場合は、すべてのマーカーをループオーバーし、それらを1つずつ削除する必要があります。次のようなものになります。

if (currentMarkers!==null) {
    for (var i = currentMarkers.length - 1; i >= 0; i--) {
      currentMarkers[i].remove();
    }
}

Thar var currentMarkersにすべてのマーカーが含まれていることを考慮してください。

oneMarker= new mapboxgl.Marker(currentMarkerDiv)
    .setLngLat(marker.geometry.coordinates)
    .addTo(mapboxMap);
    currentMarkers.Push(oneMarker);

ここで、var currentMarkersはグローバル変数です。

var currentMarkers=[];

完全な例：

// markers saved here
var currentMarkers=[];

// tmp marker
var oneMarker= new mapboxgl.Marker(currentMarkerDiv)
    .setLngLat(marker.geometry.coordinates)
    .addTo(mapboxMap);

// save tmp marker into currentMarkers
currentMarkers.Push(oneMarker);


// remove markers 
if (currentMarkers!==null) {
    for (var i = currentMarkers.length - 1; i >= 0; i--) {
      currentMarkers[i].remove();
    }
}
8
AIT MANSOUR Mohamed

このようなマーカーを追加した場合（スタイリングとカスタム画像をマーカーとして追加できるようにするため）、クラスを削除できます（ただし、私はJqueryを使用して行いました）。

GeoJsonにあるマーカーの追加：

_GeoJson.features.forEach(function(marker) {
var el = document.createElement('div');
el.className = 'marker';
new mapboxgl.Marker(el).setLngLat(marker.geometry.coordinates).addTo(map);
});
_

マーカーを削除する：

$( ".marker" ).remove();

0
Ralph1983