当用户悬停在信息窗口上时，取消Google Maps V3信息窗口关闭事件

Cancel a Google Maps V3 InfoWindow close event when the user hovers over the InfoWindow

本文关键字：窗口 信息窗 信息 Maps Google V3 事件 取消 悬停 用户      更新时间：2023-09-26

当用户将鼠标移出信息窗口时，我想关闭信息窗口。然而，在下面的代码中，即使我把鼠标放在信息窗口上，它也会在5秒内关闭。是这个bug还是有其他解决方案？

var info = new google.maps.InfoWindow({
        content: '<div>Loading...</div>'
});

var bindMarker = function(marker, attr, feature)
{   
    google.maps.event.addListener(marker, 'mouseover', function(clicked) {
            info.setContent(self.createInfoWindowFor(marker, attr, feature));
            info.open(self.map, marker);
    });
    google.maps.event.addListener(marker, 'mouseout', function(){
        setTimeout(function(){info.close(self.map, marker);}, '5000');
    });
    google.maps.event.addListener(marker, 'click', function(clicked) {
            info.close(self.map, marker);
    });
};

如果我理解正确，您使用setTimeOut是为了有时间将鼠标放在信息窗口上，这样它就不会在鼠标离开标记时关闭。

使用鼠标离开标记的内部尝试鼠标移动地图。通过这种方式，如果你把鼠标放在信息窗口上，事件mousemove不会触发，并且可以把鼠标放到信息窗口上而不关闭它。但当你在地图上移动时，信息窗口会关闭。

google.maps.event.addListener(map, 'mousemove', function (event) {
    infowindow1.close();
});

据我所知，您的代码运行良好，如果您将鼠标悬停在信息窗口上，您只想阻止信息窗口消失。

为此，您需要为超时ID创建一个全局变量（请参阅https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.clearTimeout)对于超时功能，所以在代码的顶部：

var infoTimeoutID = null;

然后，当您调用setTimeout时，需要设置超时ID，如下所示：

        infoTimeoutID = setTimeout(function(){info.close(self.map, marker);}, '5000');

然后，当信息窗口显示如下内容时，您需要将mouseover侦听器添加到信息窗口中：

function() {
    if(infoTimoutId != null) {
        window.clearTimeout(infoTimeoutID);
    }
}

您还需要添加一个mouseout处理程序来关闭infoWindow（如果需要的话）。

相关文章：