MapBox 清除所有当前标记

Posted 2023-02-16

【中文标题】MapBox 清除所有当前标记

【英文标题】：MapBox clear all current markers

【发布时间】：2018-02-19 16:26:15

【问题描述】：

我创建了一个 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 不是可识别的功能”（或类似功能）。

【问题讨论】：

How to remove all layers and features from map?的可能重复

试过@xmojmr。它说 eachLayer 不是公认的功能。

【参考方案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 = []

【讨论】：

对于其他使用 react 纯组件的人，通过 useStates 存储地图和标记，然后在效果跟踪 [] 中实例化地图，并在跟踪您的数据结构的效果中删除/添加标记.

【参考方案2】：

如果你添加了多个标记，并且你想清除地图上的所有标记，你必须遍历所有标记，并一个一个删除它们，你会得到这样的结果：

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

【讨论】：

这应该是与问题相关的最佳答案。

【参考方案3】：

如果您添加了这样的标记（以便能够添加样式和自定义图像作为标记），那么您可以简单地删除该类（不过我是通过 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();

【讨论】：

这不是一个好主意，因为您只是从 DOM 中删除了一些东西，而没有在 mapbox 中清理它们。它们可能不再显示，但标记引用可能仍存在于内存中。

【参考方案4】：

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

可以尝试使用marker.remove，而不是map.remove：

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