如何在点击其他标记或地图区域时关闭Google Maps API信息窗口

嘿，这个需求其实很好解决，核心思路就是用一个全局变量追踪当前打开的信息窗口，每次打开新窗口前先把之前的关掉就行。我给你调整下代码，照着改就能实现：

首先，在全局作用域里声明一个变量，用来保存当前打开的信息窗口：

let currentInfoWindow = null;

然后修改你的addMarker函数，在标记的点击事件里加入关闭旧窗口的逻辑。我帮你补全并修改关键部分：

function addMarker(props) {
  // 创建标记
  const marker = new google.maps.Marker({
    position: props.coords,
    map: map
  });

  // 如果有内容，创建信息窗口
  if (props.content) {
    const infoWindow = new google.maps.InfoWindow({
      content: props.content
    });

    // 标记点击事件
    marker.addListener('click', () => {
      // 先关闭当前打开的信息窗口（如果存在）
      if (currentInfoWindow) {
        currentInfoWindow.close();
      }
      // 打开新的信息窗口
      infoWindow.open(map, marker);
      // 更新全局变量，保存当前打开的窗口
      currentInfoWindow = infoWindow;
    });
  }
}

关键逻辑说明： #

• 全局变量currentInfoWindow始终记录着当前正在显示的信息窗口，初始值为null（表示没有窗口打开）。
• 每次点击标记时，先检查currentInfoWindow是否存在，如果存在就调用close()方法关闭它。
• 打开新的信息窗口后，把currentInfoWindow更新为这个新窗口，确保下次点击时能正确关闭它。

如果还需要点击地图空白区域也关闭信息窗口，给地图加个点击事件就行：

map.addListener('click', () => {
  if (currentInfoWindow) {
    currentInfoWindow.close();
    currentInfoWindow = null; // 重置变量，避免后续判断出错
  }
});

这样不管是点击其他标记还是地图空白处，都能保证同一时间只有一个信息窗口打开啦～

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