谷歌地图 API v3 信息窗口关闭事件/回调？

Question

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

有什么我可以听的回调吗？ 或者也许我可以做一些像addListener("close", infowindow1, etc ？

Answer 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
});

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);

...如果您实际上只关心是否使用“X”按钮关闭了infoWindow ，那么监控closeclick就可以了。 但是，它可能已经关闭或已经关闭，还有其他原因。

Answer 3

简化和扩展最受支持的解决方案，您可以在处理标记单击事件期间创建标记，同时由于 x 图标的closeclick事件而将其删除。

这是一个示例，其中包含重复信息 window 通过在标记上添加 boolean 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);
      });
    }
  });

然后，如果由于 map 上的单击事件而要删除所有打开的信息 windows，则可以遍历mapSet['infoWindowsObj']的内容以完全删除每个。

我相信这种行为可以让您在大多数情况下使用 infowindow，而不必按照 google 的自定义弹出示例重新实现整个事情。

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();
});

我覆盖了这个点击 function 因为在我改变它的 css/位置后点击按钮在 safari 中不起作用。

Answer 5

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

Answer 6

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

触发关闭信息窗口

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