谷歌地圖 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');