调试JavaScript变量传递：Google地图标记信息窗口数据传递问题

嘿，我太懂你踩的这个坑了——异步操作里的变量作用域简直是前端开发者的日常陷阱！你现在的核心问题是：当makeRequest的异步回调触发displayLocation时，participantName的作用域已经发生了变化，导致InfoWindow拿不到你期望的那个值。

下面给你几个针对性的解决方案，按上手难度排序：

方案1：用ES6 let的块级作用域（最简单） #

如果你的代码是在循环里批量调用makeRequest，把循环里的变量声明从var换成let就行。let会在每次循环迭代时创建独立的作用域，把当前的participantName牢牢锁住：

// 原来可能是这样的代码（有问题）
for (var i = 0; i < participantList.length; i++) {
  var participantName = participantList[i].name;
  makeRequest(apiUrl, function(data) {
    displayLocation(data.lat, data.lng, participantName);
  });
}

// 改成用let声明变量（修复作用域问题）
for (let i = 0; i < participantList.length; i++) {
  let participantName = participantList[i].name;
  makeRequest(apiUrl, function(data) {
    displayLocation(data.lat, data.lng, participantName);
  });
}

方案2：闭包封装变量（兼容旧环境） #

如果需要兼容不支持ES6的环境，闭包是经典的解决方案——把每个participantName封装在独立的函数作用域里，避免被后续操作覆盖：

// 先写一个闭包函数，专门保存当前的participantName
function createMarkerHandler(targetName) {
  return function(data) {
    displayLocation(data.lat, data.lng, targetName);
  };
}

// 调用时传入当前的participantName
for (var i = 0; i < participantList.length; i++) {
  var participantName = participantList[i].name;
  makeRequest(apiUrl, createMarkerHandler(participantName));
}

方案3：给标记对象绑定自定义属性 #

在displayLocation里创建标记时，直接把participantName挂载到标记对象上，后续点击标记时从标记本身读取这个值：

function displayLocation(lat, lng, participantName) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: yourMapInstance,
    // 给标记添加自定义属性，保存名称
    participantName: participantName
  });

  var infoWindow = new google.maps.InfoWindow();
  google.maps.event.addListener(marker, 'click', function() {
    // 通过this访问标记的自定义属性，确保拿到正确的名称
    infoWindow.setContent(`<div><strong>${this.participantName}</strong></div>`);
    infoWindow.open(yourMapInstance, this);
  });
}

为什么之前会失效？ #

简单说：如果用var声明participantName，它的作用域是整个外层函数（不是循环块）。当异步回调执行时，循环已经跑完了，participantName会被最后一次迭代的值覆盖，导致所有InfoWindow都显示同一个名字。而let或闭包能确保每个回调拿到的是当前迭代的独立变量值。

你可以根据自己的代码结构选一个方案试试，应该就能解决InfoWindow拿不到正确participantName的问题啦！

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