Leaflet应用中地震标记无法移除的问题求助

使用Leaflet API实现地震标记的显示/隐藏切换控制，点击按钮可正常创建标记，但再次点击执行移除操作时，控制台日志显示状态符合预期（markersVisible切换为false），但标记并未从地图界面消失。

问题根源 #

查看removeMarkers函数的实现：

function removeMarkers() {
    if (marker) {
        map.removeLayer(marker);
        marker = null;
    }
    earthquakeMarkers = [];
}

这里存在两个关键问题：

1. 全局变量marker在addEarthquakes函数中并未被赋值——该函数内的marker是局部变量，全局marker始终为null，导致map.removeLayer(marker)从未执行。
2. 仅清空了存储标记的earthquakeMarkers数组，但没有遍历数组将每个标记从地图中移除，地图上的标记实例依然存在。

修复方案 #

修改removeMarkers函数，遍历earthquakeMarkers数组，逐个移除地图上的标记，再清空数组：

function removeMarkers() {
    // 遍历所有地震标记，从地图中移除
    earthquakeMarkers.forEach(marker => {
        map.removeLayer(marker);
    });
    // 清空标记数组
    earthquakeMarkers = [];
}

同时可以删除全局变量中无用的var marker = null;，避免变量混淆。

额外优化建议 #

为避免重复创建标记（多次点击显示按钮时重复添加），可以在addEarthquakes执行前先清空已有标记，或者在toggleMarkers的添加分支中检查数组是否为空：

function toggleMarkers() {
    console.log('markersVisible initial function state: \n', markersVisible);
    if (markersVisible) {
        console.log('removing markers');
        removeMarkers();
        markersVisible = false;
        console.log(earthquakeMarkers);
        console.log('This state must be false: \n', markersVisible, '\n----------------------');
    } else {
        console.log('adding markers');
        // 先清空已有标记，避免重复添加
        removeMarkers();
        addEarthquakes(59.3607741849963, 49.9028622252397, 1.7689121033873, -8.61772077108559);
        markersVisible = true;
        console.log(earthquakeMarkers);
        console.log('This state must be true: \n', markersVisible, '\n----------------------');
    }
}

内容的提问来源于stack exchange，提问作者Victor Romero