MapBox清除所有当前标记

时间:2017-09-11 12:13:26

标签: javascript mapbox mapbox-gl-js

我用:

创建了一个MapBox实例
var map = new mapboxgl.Map({
    container : 'map',
    style : 'mapbox://styles/mapbox/streets-v9'
});

我需要清除所有标记,并尝试使用map.remove(marker)等每个标记,以及其他一些东西,但似乎没有任何效果。

是否有一个简单的函数调用只是清除地图上的所有标记?

编辑:与How to remove all layers and features from map?不同,因为我得到" eachLayer不是公认的功能" (或类似)在控制台中。

4 个答案:

答案 0 :(得分:9)

你看到了吗? https://www.mapbox.com/mapbox-gl-js/api/#marker#remove

而不是map.remove可能会尝试marker.remove:

var marker = new mapboxgl.Marker().addTo(map);
marker.remove();

答案 1 :(得分:1)

如果添加了多个标记,并且想要清除地图上的所有标记,则必须遍历所有标记,并将它们逐个删除,您将得到类似以下内容:

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

考虑变量 currentMarkers 包含所有标记,您可以使用以下标记来实现:

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

其中var currentMarkers 是全局变量:

var currentMarkers=[];

答案 2 :(得分:1)

如果您添加了这样的标记(以便能够添加样式和自定义图像作为标记),则只需删除该类(不过我是通过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();

答案 3 :(得分:1)

您无法查询所有标记 - 无需 hack - 即可删除,因此请在添加时跟踪它们,以便以后迭代和删除。

let mapMarkers = []

// adding
const marker = new mapboxgl.Marker()
                        .setLngLat([0, 0])
                        .addTo(map)
mapMarkers.push(marker)

// removing
mapMarkers.forEach((marker) => marker.remove())
mapMarkers = []