在Shiny中为Google Maps添加EventListener实现信息窗口自动关闭

嘿，看来你已经搞定了手动关闭所有信息窗口的基础逻辑，接下来咱们把它升级成自动触发的版本，覆盖你提到的「点击地图关闭」「打开新窗口关旧窗口」这些场景，直接上干货：

方案1：点击地图空白区域自动关闭所有信息窗口 #

给你的Google Maps实例绑定一个click事件，当用户点击地图上没有标记的区域时，自动执行你已经写好的关闭逻辑：

// 给地图添加点击事件监听器
google.maps.event.addListener(map, 'click', function() {
  // 遍历所有标记，关闭对应的信息窗口
  for (var i = 0; i < mapgoogleMarkersdefaultLayerId.length; i++) {
    mapgoogleMarkersdefaultLayerId[i].infowindow.close();
  }
});

这样用户只要点击地图空白处，所有打开的信息窗口就会立刻关闭，完全不用手动操作。

方案2：打开新信息窗口时自动关闭旧窗口 #

如果你的需求是同时只显示一个信息窗口，这个方案会更高效——不用遍历所有标记，只需要维护一个「当前活跃窗口」的变量：

// 声明全局变量，存储当前打开的信息窗口
let activeInfoWindow = null;

// 给每个标记绑定点击打开窗口的事件
for (var i = 0; i < mapgoogleMarkersdefaultLayerId.length; i++) {
  google.maps.event.addListener(mapgoogleMarkersdefaultLayerId[i], 'click', function() {
    // 先关闭已经打开的窗口（如果有的话）
    if (activeInfoWindow) {
      activeInfoWindow.close();
    }
    // 打开当前标记的信息窗口
    this.infowindow.open(map, this);
    // 更新活跃窗口的引用
    activeInfoWindow = this.infowindow;
  });
}

这个逻辑的好处是性能更好，而且用户体验更符合常规地图应用的交互习惯——永远只会看到一个信息窗口。

方案3：结合两种场景（推荐） #

把上面两个方案结合起来，既支持点击空白区域关闭所有窗口，又支持打开新窗口时自动关闭旧窗口，覆盖所有常用场景：

let activeInfoWindow = null;

// 标记点击事件：打开新窗口前关闭旧窗口
for (var i = 0; i < mapgoogleMarkersdefaultLayerId.length; i++) {
  google.maps.event.addListener(mapgoogleMarkersdefaultLayerId[i], 'click', function() {
    if (activeInfoWindow) {
      activeInfoWindow.close();
    }
    this.infowindow.open(map, this);
    activeInfoWindow = this.infowindow;
  });
}

// 地图点击事件：关闭所有窗口
google.maps.event.addListener(map, 'click', function() {
  if (activeInfoWindow) {
    activeInfoWindow.close();
    activeInfoWindow = null; // 重置活跃窗口引用
  }
  // 如果你还是需要关闭所有可能的窗口（比如存在多个窗口被意外打开的情况），可以保留原来的循环
  // for (var i = 0; i < mapgoogleMarkersdefaultLayerId.length; i++) {
  //   mapgoogleMarkersdefaultLayerId[i].infowindow.close();
  // }
});

小提示 #

• 确保你的mapgoogleMarkersdefaultLayerId数组正确存储了所有标记对象，并且每个标记的infowindow属性确实指向对应的信息窗口实例。
• 如果使用的是Google Maps API v3，上面的事件监听语法是完全兼容的；如果是旧版本（比如v2），语法会有差异，但现在几乎没人用v2了~

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