JavaScript谷歌地图API点击标记时addEventListener不展示信息窗口

问题根因排查&解决方法 #

1. 标记点击事件绑定错误修正 #

Google Maps JavaScript API的标记事件监听必须用google.maps.event.addListener()，不能用原生DOM的addEventListener，你之前改成后者的操作是错误的，先改回API官方提供的事件绑定方法。
正确绑定示例：

// 全局只声明一个InfoWindow实例即可，不要在循环里重复创建
const infoWindow = new google.maps.InfoWindow();

// 绑定标记点击事件
marker.addListener("click", () => {
  infoWindow.setContent("你的灾情报告HTML内容");
  infoWindow.open(map, marker);
});

2. 无控制台报错但窗口不弹出的常见原因 #

• 信息窗口内容为空/格式错误：检查你传入setContent的灾情数据是否存在未定义的变量、标签未闭合的HTML字符串，内容为空时API会静默不弹出窗口
• 作用域问题：如果是在循环中批量创建标记，会出现变量提升导致所有标记都绑定最后一个数据的问题，用闭包或者let声明循环变量解决
  错误示例（用var声明循环变量）：

  for (var i = 0; i < disasterList.length; i++) {
    var marker = new google.maps.Marker({...});
    // 点击时i已经是循环结束的最大值，数据取不到
    marker.addListener("click", () => {
      infoWindow.setContent(disasterList[i].content);
    })
  }
  

  修正方法：把var改成let，或者用立即执行函数包裹绑定逻辑
• 地图实例/标记实例作用域错误：检查你声明的map变量、marker变量是否是点击事件能访问到的作用域，不要嵌套在局部函数里导致外部访问不到

3. 栈片段302行语法错误说明 #

这个错误是Stack Snippets平台本身的编译问题，和你的代码无关：你粘贴的代码片段在平台的编译流程中会和平台自身的基础脚本拼接，302行属于平台拼接后的代码行，不是你写的代码的问题，本地运行无报错可以忽略这个提示。

4. 额外校验点 #

• 检查Maps JS API的引入是否正确添加了libraries=places参数，完整引入示例：

  <script async src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places&callback=initMap"></script>
  

• 检查initMap回调函数是否全局可访问，不要包裹在其他函数内部导致API加载完成后无法触发初始化逻辑

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