为什么Leaflet地图marker点击事件总是返回数组最后一项的值

该问题是典型的作用域与闭包变量引用问题，核心原因如下：

1. 你使用var声明的变量不存在块级作用域，只有全局作用域和函数作用域。默认你的事件绑定逻辑写在for循环内部，循环过程中不管是循环头部的i，还是循环内部赋值的marker变量，本质上都是同一个作用域下的共享变量，每次循环只会覆盖变量的值，不会生成新的独立变量。
2. 你绑定的popupopen事件回调属于闭包，它持有的是外部marker变量的引用，而非绑定回调那一刻marker的快照值。等到用户点击标记触发回调时，for循环早已执行完毕，此时marker变量已经被赋值为数组的最后一个元素，因此打印出来的永远是最后一项的index。

以下三种方案都可以解决该问题，可根据场景选择：

• 方案1：使用ES6的let/const替换var（推荐，兼容性覆盖绝大多数现代浏览器）
  let/const拥有块级作用域，每次for循环都会生成独立的变量实例，回调闭包会引用每次循环对应的独立marker，不会被后续循环覆盖：

// 循环头部用let声明i
for (let i = 0; i < markers.length; i++) {
    const marker = markers[i]
    marker.index = i
    marker.bindPopup(popup).on('popupopen', function(e) {     
        console.log(marker.index)
    })
}

• 方案2：使用立即执行函数（IIFE）创建独立作用域（适合需要兼容ES5的低版本场景）
  通过立即执行函数将每次循环的marker封装为函数参数，保存在独立的函数作用域内，不会被后续循环覆盖：

for (var i = 0; i < markers.length; i++) {
    markers[i].index = i
    // 将当前循环的marker作为参数传入立即执行函数
    (function(currentMarker) {
        currentMarker.bindPopup(popup).on('popupopen', function(e) {     
            console.log(currentMarker.index)
        })
    })(markers[i])
}

• 方案3：直接从事件对象获取目标实例（最稳妥，不依赖作用域特性）
  事件回调的参数e的target属性就是当前触发弹窗打开事件的marker实例，不需要依赖外部变量：

for (var i = 0; i < markers.length; i++) {
    markers[i].index = i
    markers[i].bindPopup(popup).on('popupopen', function(e) {     
        console.log(e.target.index)
    })
}

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