无法删除传单多边形地图上的标记答案

【问题标题】：Unable to remove markers on leaflet polygon map无法删除传单多边形地图上的标记
【发布时间】：2019-09-28 18:15:21
【问题描述】：

我使用 react-leaflet 创建了多边形地图。我能够创建它并且还能够创建在地图上的多选下拉列表中选择的标记。但是，我无法为此删除选定的标记[或任何标记]。我提供了下面的代码，它分为initializationMap 方法，该方法将创建初始化地图，后面的部分iis updateMakers 用于在它正在执行的Map 上设置新标记。我的问题是删除地图上的标记。我是传单的新手，我没有错过什么。我试图创建一个“标记”层，但没有帮助我。请帮忙。谢谢！

var map = new L.Map('polygonMap'); //Initialization of Map
var markers = new L.FeatureGroup().addTo(map); // Creating a Feature Layer

我正在使用markers.addLayer(marker1); 添加标记，这很有效，但是如果我在标记上迭代而不是尝试删除它，我将无法做到这一点。请帮忙，我是传单的新手。 TIA

【问题讨论】：

你能展示一下你是如何迭代的吗？错误可能就在那里。
所以每当从下拉列表中选择一个选项来删除一个元素时。我使用 markerLayer.clearLayers() 和 polygonLayer.clearLayers() 使标志为真并删除。我正在使用 markerLayer.addLayer(marker); 添加标记。你能告诉我如何删除所有标记并将标记放在列表道具中吗？

标签： leaflet react-leaflet

【解决方案1】：

如果 marker1 是要移除的标记层对象，请使用 featureGroup 中的 removeLayer 函数。

见https://leafletjs.com/reference-1.5.0.html#featuregroup-removelayer

你的 featureGroup 被称为标记，所以它是：

markers.removeLayer(marker1)

【讨论】：

【解决方案2】：

经过数小时试图找出任何解决方案后，我才发现这一点，我的意思是使用反应传单隐藏或显示标记。

我可以在标记对象或依赖项/帮助程序上设置类名（类），无论选择哪种解决方案。在我的解决方案中，我在标记上使用自定义图标，所以我定义了一个自定义

L.icon({
                    iconUrl: ...,className: `marker-icon-route`...})

然后在任何事件或 onclick 上实现我刚刚所做的就是通过 document.querySelectorAll 我遍历地图中包含提到的标记图标路由类的所有元素，只需处理一个文档查询选择器

document.querySelectorAll('.marker-icon-route').forEach(e => e.style.display = 'none');

另一方面，如果您只想显示标记

 document.querySelectorAll('.marker-icon-route').forEach(e => e.style.display = 'block');

...此解决方案可用于leaflet-react 提供的其他帮助程序，例如折线、poligones 等。对不起我的英语，我希望我的谦虚解决方案可以帮助任何开发人员沮丧，因为我一直在这几个小时。

【讨论】：