移除leaflet地图上的图例

Question

我有一个叶片地图，设置了当用户点击按钮时根据类别更改样式。

现场地图：http://maneesha.github.io/test_map.html 源代码：https://github.com/maneesha/maneesha.github.io 对于每种样式都有一个图例，我的问题是当单击另一个按钮（或再次单击该按钮）时，无法使旧图例消失。因此，每次单击地图时，都会出现新的图例。

map.removeControl(legend);

点击函数不起作用，导致在js控制台中出现以下结果：

Uncaught TypeError: Cannot read property 'removeFrom' of undefined

有什么想法吗？

编辑：上面的存储库已更改。现场网站不再存在，源代码位于https://github.com/maneesha/leaflet_map_with_styles_and_legends

- maneesha

Answer 1

你正在click事件的处理程序函数中为change-gender分配变量legend。如果这样做，legend将只在该函数中可用。如果您在单击处理程序之前声明var legend;，然后在单击处理程序中更改：var legend = L.control({position: 'topright'}); 为 legend = L.control({position: 'topright'}); ，则可以使legend在全局范围内可用，因此您可以从全局范围内的每个函数中访问它。

这样做是行不通的：

document.getElementById('change-gender').addEventListener('click', function () {
    var genderLegend = L.control({'position': 'topright'}).addTo(map);
});

console.log(genderLegend) // returns undefined

这将会:

var genderLegend;

document.getElementById('change-gender').addEventListener('click', function () {
    genderLegend = L.control({'position': 'topright'}).addTo(map);
});

console.log(genderLegend) // returns the legend instance

- iH8

---

谢谢 - 我想那样做就可以了。如果其他人也遇到这个问题，还有一件事：我在 legend.addTo(map) 之前放置了 map.removeControl(legend);，这样任何现有的图例都会在创建新图例之前被删除。所以我不仅要初始化 var legend;，而且实际上必须创建图例，以便有一个可以删除的图例。 - maneesha

在声明变量时，你不必创建一个L.Control实例。如果你不需要它，为什么要这样做呢？你可以简单地将map.removeControl(legend)包裹在一个if语句中，检查legend是否是L.Control的实例。例如：if (legend instanceof L.Control) { map.removeControl(legend); } - iH8

你说得对 - 我一开始就尝试了，但是我的条件语句不太对，所以我认为它不会起作用，但现在我明白了。谢谢！ - maneesha