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

时间:2011-07-21 14:31:19

标签: javascript jquery google-maps google-maps-api-3

我喜欢跟踪在我的Google地图界面上打开的任何和所有信息窗口(我将他们的名字存储在一个数组中),但我无法弄清楚当它们关闭时如何将它们从我的阵列中删除每个右上角的“x”。

我可以听一些回调吗?或者也许我可以做类似的事情 addListener("close", infowindow1, etc

5 个答案:

答案 0 :(得分:153)

有一个可以帮助你的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
});

答案 1 :(得分:7)

我在这里找到的唯一一致的解决方案是保留指向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就可以了。但是,还有其他原因可能会或已经关闭。

答案 2 :(得分:1)

为简化和扩展most upvoted solution,您可以在处理标记单击事件期间创建标记,让您打包由于x图标的fetch(url) .then((response) => { if (!response.ok) { throw Error("ERROR"); } return response.json(); }) .then((data) => { console.log(data); const html = data .map((item) => { console.log(item.incident_updates[0]); return `<div class="card card-space"> <div class="card-body"> <h5 class="card-title">${item.title}</h5> <h6 class="card-subtitle mb-2 text-muted">${item.start_time}</h6> <p class="card-text">${item.incident_updates.body}</p> // issues with this </div> </div>`; }) .join(""); 事件而同时删除的标记。

这是一个示例,其中包括通过在标记上添加布尔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); }); } }); 的内容以完全删除每个窗口。

我相信这种行为可以让您在大多数情况下无需使用信息窗口,而不必按照Google的custom popup example重新实现整个过程。

答案 3 :(得分:0)

试试这个:

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 :(得分:-1)

这个很简单,找到关闭信息窗口按钮的类,就是'.gm-ui-hover-effect'

触发关闭信息窗口

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