使用jQuery循环绑定多元素change事件操作Leaflet图层报错求解

问题根源 #

你触发报错的核心原因是 map.hasLayer() 等Leaflet方法接收的参数是Leaflet图层实例对象，但你循环里传入的是字符串类型的图层变量名，不是实际的实例对象。

具体错误点 #

1. 你定义的obj对象的value值全部为字符串，比如"ID_001"是字符串，而非你提前声明的ID_001图层实例变量。
2. 代码里存在笔误：#ID_002对应的value错写为"ID_001"，后续执行会导致两个按钮控制同一个图层。
3. 闭包问题（可选优化）：旧版本jQuery的$.each在事件回调里引用循环变量可能出现变量提升导致的取值错误，也可以通过自定义属性方案规避。

修复方案 #

方案1：直接修改obj的value为实际图层实例

// 这里的ID_001、ID_002是你之前创建的Leaflet图层实例变量，不要加引号
var layerMap = {
    "#ID_001": ID_001,
    "#ID_002": ID_002
};

$.each(layerMap, function(selector, layerInstance) {
    $(selector).change(function(event) {
        event.preventDefault();
        if(map.hasLayer(layerInstance)) {
            $(this).removeClass('selected');
            map.removeLayer(layerInstance);
        } else {
            map.addLayer(layerInstance);
            $(this).addClass('selected');
        }
    });
});

方案2：用元素自定义属性关联图层（更易维护，适合大量元素场景）

给所有控制按钮统一加类名比如layer-control，同时加自定义属性data-layer-id对应图层标识，提前把所有图层实例存在一个对象里：

// 提前把所有图层实例存入对象，key为图层标识
var allLayers = {
    ID_001: ID_001,
    ID_002: ID_002
};

// 统一绑定事件，不需要循环遍历枚举
$('.layer-control').change(function(event) {
    event.preventDefault();
    const layerId = $(this).data('layer-id');
    const targetLayer = allLayers[layerId];
    if(map.hasLayer(targetLayer)) {
        $(this).removeClass('selected');
        map.removeLayer(targetLayer);
    } else {
        map.addLayer(targetLayer);
        $(this).addClass('selected');
    }
});

对应的HTML按钮示例：

<input type="checkbox" class="layer-control" data-layer-id="ID_001" id="ID_001">
<input type="checkbox" class="layer-control" data-layer-id="ID_002" id="ID_002">

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