Google 地图 API v3 infowindow 关闭事件/回调？

Question

我喜欢跟踪我Google地图界面上打开的所有信息窗口（我将它们的名称存储在数组中），但是我无法弄清如何从数组中删除它们，当它们通过每个信息窗口右上角的“x”关闭时。

是否有一些回调函数可以监听？或者我可以做类似于 addListener("close", infowindow1, etc 的事情吗？

- Colin

Answer 1

有一个名为closeclick的事件可以帮助你关闭信息窗口。

var currentMark;
var infoWindow = new google.maps.InfoWindow({
            content: 'im an info windows'
        });
google.maps.event.addListener(marker, 'click', function () {
          infoWindow.open(map, this);
          currentMark = this;

});
google.maps.event.addListener(infoWindow,'closeclick',function(){
   currentMark.setMap(null); //removes the marker
   // then, remove the infowindows name from the array
});

- Jorge

---

请注意，当附近的另一个标记被点击并且该标记被自动关闭时，此操作不会触发...例如，当滚动发生时，以确保信息窗口处于地图的可见边界内。 - Ben Guild

Answer 2

在这里我找到的唯一稳定的解决方案是保留对 infoWindow 的指针，并在需要验证它是否已关闭时检查它的 .getMap() 方法。

原因是点击其他元素可能会导致 infoWindow 因其他原因被关闭，而不触发 closeclick 事件。

var infoWindow = new google.maps.InfoWindow({ content: 'Something to put here.' });
infoWindow.open(map, infoWindow);

setInterval(function ()
{
    console.log("infoWindow is bound to map: "+(infoWindow.getMap() ? true : false));

}, 1000);

如果你只关心infoWindow是否使用“X”按钮关闭，那么监视closeclick就可以了。但是，还有其他原因可能导致它被关闭或已经关闭。

- Ben Guild

Answer 3

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

- Mohamed ElNady

Answer 4

尝试这个：

var closeBtn = $('.gm-style-iw').next();
closeBtn.click(function(){
    //other things you want to do when close btn is click
    that.infowindow.close();
});

我重写了这个点击函数，因为在我改变它的CSS/位置后，在Safari中点击按钮无法工作。

- Tina Chen

Answer 5

简化并扩展最受欢迎的解决方案，您可以在处理标记单击事件时创建标记，让您同时打包由于x图标的closeclick事件而导致其删除。

以下是一个示例，通过在标记上附加布尔值hasInfoWindow状态来避免重复信息窗口创建。

  newMarker.addListener('click', function () {
    // If a marker does not yet have an info window, create and show it
    if (newMarker['hasInfoWindow'] !== true) {
      newInfoWindow = new google.maps.InfoWindow({content: infoContent}); 
      mapSet['infoWindowsObj'].push(newInfoWindow);
      newMarker['hasInfoWindow'] = true;
      newInfoWindow.open(mapSet, newMarker);

      // If info window is dismissed individually, fully remove object
      google.maps.event.addListener(newInfoWindow, 'closeclick', function () {
        newInfoWindow.setMap(null);
        newMarker['hasInfoWindow'] = false;
        mapSet['infoWindowsObj'].filter(arrayItem => arrayItem !== newInfoWindow);
      });
    }
  });

如果您想通过地图上的点击事件删除所有打开的信息窗口，可以遍历 mapSet['infoWindowsObj'] 的内容以完全删除每个信息窗口。

我相信这种行为让您可以在大多数情况下使用信息窗口，而无需像谷歌的 自定义弹出窗口示例 那样重新实现整个功能。

- Rob

Answer 6

这很简单，找到关闭信息窗口按钮的类，即'.gm-ui-hover-effect'

触发关闭信息窗口

$('.gm-ui-hover-effect').trigger('click');

- Qaisar Mahmood