Google Maps循环创建的Marker无法弹出InfoWindow问题求助

问题原因 #

循环中绑定点击事件时使用了箭头函数，箭头函数会捕获外部作用域的i变量。循环结束后，i的值会变成数组的长度（示例中pos数组长度为3，最终i=3），此时infowindowA[i]和markerA[i]均为不存在的索引，导致点击Marker时找不到对应的InfoWindow实例，无法弹出窗口。

手动创建的「Start」「Ziel」标记能正常工作，是因为它们的事件监听是单独绑定的，不存在共享变量导致的索引错位问题。

解决方案 #

方案1：使用let声明循环变量（ES6+推荐） #

let在循环迭代中会为每一次循环创建独立的作用域，每个迭代的i都是独立变量，不会被后续循环覆盖：

for (let i = 0; i < pos.length; i++) {
  infowindowA[i] = new google.maps.InfoWindow({
    content: "Pos " + (i+1) + "<br>Zeit " + pos[i][3] + "<br>akt. Geschwindigkeit " + pos[i][4] + "km/h<br>Distanz zu Pos" + i + " " + pos[i][2] + "km",
    ariaLabel: "Pos" + (i+1)
  }); 
  markerA[i].addListener("click", () => {
    infowindowA[i].open({anchor: markerA[i], map});
  });
}

方案2：立即执行函数(IIFE)创建独立作用域 #

通过立即执行函数将当前循环的i值传入，保存为独立作用域内的变量：

for (var i = 0; i < pos.length; i++) {
  infowindowA[i] = new google.maps.InfoWindow({
    content: "Pos " + (i+1) + "<br>Zeit " + pos[i][3] + "<br>akt. Geschwindigkeit " + pos[i][4] + "km/h<br>Distanz zu Pos" + i + " " + pos[i][2] + "km",
    ariaLabel: "Pos" + (i+1)
  }); 
  // 用立即执行函数封装，保存当前i的副本
  (function(index) {
    markerA[index].addListener("click", () => {
      infowindowA[index].open({anchor: markerA[index], map});
    });
  })(i);
}

方案3：使用数组forEach遍历 #

forEach的回调函数会为每个数组元素创建独立作用域，避免变量共享问题：

pos.forEach((item, index) => {
  infowindowA[index] = new google.maps.InfoWindow({
    content: "Pos " + (index+1) + "<br>Zeit " + item[3] + "<br>akt. Geschwindigkeit " + item[4] + "km/h<br>Distanz zu Pos" + index + " " + item[2] + "km",
    ariaLabel: "Pos" + (index+1)
  }); 
  markerA[index].addListener("click", () => {
    infowindowA[index].open({anchor: markerA[index], map});
  });
});

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