在Google Maps上为多标记添加唯一信息窗口的问题

问题分析与解决方法 #

你的代码里存在几个关键错误：

1. 第一个循环的条件完全写错：原代码循环条件l < markerListItem.length中，l是未定义变量，且逻辑颠倒，应该是markerListItem < markerList.length，否则循环无法正确遍历所有标记数据。
2. 事件绑定的闭包写法错误+未定义变量：你尝试用闭包但写法有误，且事件回调里的marker变量未定义，导致所有点击事件最终都指向最后一个标记；另外现在用let声明循环变量时，本身就具备块级作用域，不需要额外冗余闭包。

修正后的代码方案

方案一：利用let的块级作用域（最简单）

let displayedMarkerList = [];

// 修正第一个循环的遍历条件
for (let markerListItem = 0; markerListItem < markerList.length; markerListItem++) {
  let markerDisplayObj = placeMarkerByType(
    markerList[markerListItem].latLong,
    markerList[markerListItem].markerType
  );
  displayedMarkerList.push(markerDisplayObj);
}

// 直接用let声明循环变量，每个迭代拥有独立作用域
for (let displayedMarkerListItem = 0; displayedMarkerListItem < displayedMarkerList.length; displayedMarkerListItem++) {
  const currentMarker = displayedMarkerList[displayedMarkerListItem];
  currentMarker.addListener("click", function() {
    infowindowAllMarkers.open({
      anchor: currentMarker, // 绑定当前迭代的标记作为锚点
      map,
      shouldFocus: true,
    });
  });
}

方案二：正确的闭包写法（用于理解闭包逻辑）

let displayedMarkerList = [];

// 修正第一个循环
for (let markerListItem = 0; markerListItem < markerList.length; markerListItem++) {
  let markerDisplayObj = placeMarkerByType(
    markerList[markerListItem].latLong,
    markerList[markerListItem].markerType
  );
  displayedMarkerList.push(markerDisplayObj);
}

for (let displayedMarkerListItem = 0; displayedMarkerListItem < displayedMarkerList.length; displayedMarkerListItem++) {
  // 用立即执行函数捕获当前迭代的标记
  (function(marker) {
    marker.addListener("click", function() {
      infowindowAllMarkers.open({
        anchor: marker,
        map,
        shouldFocus: true,
      });
    });
  })(displayedMarkerList[displayedMarkerListItem]);
}

额外优化：每个标记绑定独立信息窗口

如果需要每个标记对应专属的信息窗口（而非共用同一个实例），可以在创建标记时直接绑定：

let displayedMarkerList = [];

for (let markerListItem = 0; markerListItem < markerList.length; markerListItem++) {
  const markerData = markerList[markerListItem];
  let markerDisplayObj = placeMarkerByType(
    markerData.latLong,
    markerData.markerType
  );
  // 为当前标记创建专属信息窗口
  const markerInfoWindow = new google.maps.InfoWindow({
    content: markerData.infoContent // 假设你的标记数据包含信息窗口内容
  });
  // 直接绑定点击事件
  markerDisplayObj.addListener("click", function() {
    markerInfoWindow.open({
      anchor: markerDisplayObj,
      map,
      shouldFocus: true,
    });
  });
  displayedMarkerList.push({ marker: markerDisplayObj, infoWindow: markerInfoWindow });
}

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