Leaflet 地图标记移除指南：避免图层残留的常见陷阱

var marker = null; // 全局变量，用于存储单个标记

function removeMarkers() {
    if (marker) { // 检查全局的 marker 变量
        map.removeLayer(marker); // 尝试移除全局 marker
        marker = null;
    }
    earthquakeMarkers = []; // 清空存储所有地震标记的数组
}

var earthquakeMarkers = []; // 存储所有地震标记的数组

function removeMarkers() {
    if (earthquakeMarkers.length > 0) { // 检查数组中是否有标记
        earthquakeMarkers.forEach(function (marker) {
            marker.remove(); // 对数组中的每个标记调用 remove() 方法
        });
        earthquakeMarkers = []; // 所有标记从地图上移除后，清空数组
    }
}

// 全局变量
var earthquakeMarkers = []; // 用于存储所有地震标记的数组
var markersVisible = false; // 标记当前地震标记是否可见的状态

// 添加地震标记到地图
async function addEarthquakes(north, south, east, west) {
    const response = await fetch('assets/php/earthquakes.php?north=' + north + '&south=' + south + '&east=' + east + '&west=' + west);
    const data = await response.json();
    data.data.forEach(function (earthquake) {
        var lat = earthquake.lat;
        var lng = earthquake.lng;

        var earthquakeIcon = L.divIcon({
            className: 'custom-marker-icon',
            html: '<i class="fa-solid fa-house-chimney-crack"></i>',
            iconSize: [20, 20],
            iconAnchor: [20, 40]
        });

        // 创建标记，并将其添加到地图和 earthquakeMarkers 数组
        var marker = L.marker([lat, lng], { icon: earthquakeIcon });
        marker.on('click', function () {
            onMarkerClick(earthquake);
        });
        earthquakeMarkers.push(marker); // 将标记添加到数组
        marker.addTo(map); // 将标记添加到地图
    });
}

// 移除所有地震标记
function removeMarkers() {
    if (earthquakeMarkers.length > 0) {
        earthquakeMarkers.forEach(function (marker) {
            marker.remove(); // 从地图上移除每个标记
        });
        earthquakeMarkers = []; // 清空数组
    }
}

// 切换标记的显示/隐藏状态
function toggleMarkers() {
    if (markersVisible) {
        console.log('removing markers');
        removeMarkers(); // 调用正确的移除函数
        markersVisible = false;
        console.log('This state must be false: ', markersVisible);
    } else {
        console.log('adding markers');
        // 假设这里有默认的边界值，实际应用中可能根据地图视图动态获取
        addEarthquakes(59.3607741849963, 1.7689121033873, 49.9028622252397, -8.61772077108559);
        markersVisible = true;
        console.log('This state must be true: ', markersVisible);
    }
}

// Leaflet 控制按钮的事件绑定
// ... (省略其他控制按钮代码)
earthquakeMarkersControl.onAdd = function (map) {
    var button = L.DomUtil.create('button', 'leaflet-bar leaflet-control');
    button.innerHTML = '<i class="fa-solid fa-house-chimney-crack"></i>';
    button.title = 'Show Earthquake Markers';
    button.classList.add('control-button');
    L.DomEvent.on(button, 'click', function () {
        toggleMarkers(); // 绑定到切换函数
    });
    return button;
};
earthquakeMarkersControl.addTo(map);
// ... (其他 Leaflet 初始化代码)