javascript - 删除传单 map 上的图例

Question

我有一个传单 map 设置为在用户单击按钮时根据类别更改样式。

实时 map :http://maneesha.github.io/test_map.html

源代码:https://github.com/maneesha/maneesha.github.io

每种样式都有一个图例。 我的问题是，当单击另一个按钮(或再次单击该按钮)时，我无法让旧图例消失。因此，每次单击时您都会在 map 上看到一个新的图例。

放

map.removeControl(legend);

在点击功能不起作用和 结果在 js 控制台中:

Uncaught TypeError: Cannot read property 'removeFrom' of undefined

有什么想法吗？

编辑:上面的 repo 协议(protocol)已更改。实时站点不再存在；源代码位于 https://github.com/maneesha/leaflet_map_with_styles_and_legends

Answer 1

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

这行不通:

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