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

Posted 2023-02-23

【中文标题】Google Maps API v3 infowindow 关闭事件/回调？

【英文标题】：Google Maps API v3 infowindow close event/callback?

【发布时间】：2011-10-10 07:13:05

【问题描述】：

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

有什么我可以收听的回调吗？或者也许我可以做类似的事情 addListener("close", infowindow1, etc ?

【参考方案1】：

有一个 infowindows 事件调用 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
);

【讨论】：

请注意，当单击附近的另一个标记并且该标记自动关闭时不会触发...例如当滚动以确保信息窗口位于地图的可见范围内时.

【参考方案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 就可以了。但是，它可能或已经关闭还有其他原因。

【参考方案3】：

试试这个：

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 中不起作用。

【参考方案4】：

对most upvoted solution进行简化和扩展，可以在处理marker点击事件的过程中创建marker，同时让你打包删除由于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'] 的内容以完全删除每个。

我相信这种行为可以让您在大多数情况下无需使用 infowindow，而无需按照谷歌的 custom popup example 重新实现整个事情。

【参考方案5】：

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

触发关闭信息窗口

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

【参考方案6】：

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