当鼠标离开标记时，我可以让谷歌地图 API 中的信息窗口消失，但当鼠标从标记移动到他的信息窗口时不会消失

Question

在 JS 中，当我将鼠标移出它时，我需要在标记上关闭 Infowindow，但是当鼠标悬停在 infowindow 上时，infowindow 不应该消失。因为如果信息窗口中有滚动，用户可以滚动它（我想成为那个）。

google.maps.event.addListener(marker, 'mouseover', (function (marker, content, infowindow) {
            return function () {
                if (content != null && content != "")
                {
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                    if (marker.getAnimation() !== null) {
                        marker.setAnimation(null);
                    } else {                                marker.setAnimation(google.maps.Animation.BOUNCE);
                        console.log(content);
                    }
                }                      
            };
        })(marker, content, infowindow));
     google.maps.event.addListener(marker, 'mouseout', (function (marker, infowindow) {  
                return function () {
                    infowindow.close(map, marker);
                    if (marker.getAnimation() !== null) {
                        marker.setAnimation(null);
                    }
                };                 
        })(marker, infowindow));

Answer 1

Here is a JSBin 有一个工作示例。我在下面解释我的实现。

将鼠标从标记移到信息窗口

问题：当鼠标离开标记时，信息窗口立即关闭。如果用户想要滚动信息窗口上的任何内容，这使得用户无法将鼠标从标记移动到信息窗口。

解决方案：在关闭信息窗口之前稍作延迟。这让用户有时间将鼠标从标记移动到信息窗口。

marker.addListener('mouseout', function() {
  timeoutID = setTimeout(function() {
    if (!mouseOverInfoWindow) {
      closeInfoWindow();
    }
  }, 400);
});

在延迟之后，如果鼠标没有悬停在信息窗口上，请将其关闭。如果它悬停在信息窗口上，请不要执行任何操作。

鼠标移出时关闭信息窗口

如果您查看InfoWindow class reference 的事件部分，您会发现信息窗口没有类似标记的mouseout 事件。

因此，为了在用户鼠标移开信息窗口时关闭信息窗口，您需要在 DOM 上获取对信息窗口元素的引用并向其添加mouseout 事件侦听器。

var infoWindowElement = document.querySelector('.gm-style .gm-style-iw');

infoWindowElement.addEventListener('mouseout', function() {
  closeInfoWindow();
  mouseOverInfoWindow = false;
});

请记住，您只能在打开信息窗口 DOM 元素后将事件侦听器添加到它，因为打开它会将其添加到 DOM。如下代码所示：

function openInfoWindow(marker) {
  infoWindow.open(map, marker);
  addOpenInfoWindowListeners();
}

我首先打开信息窗口（将其添加到 DOM），然后添加侦听器。

更新：处理多个标记

Here is an updated JSBin 带有显示多个标记的地图，这些标记的信息窗口具有所需的功能。我所要做的就是遍历数据，并为每个项目创建一个标记和事件侦听器。

markerData.forEach(function(item) {
  var marker = new google.maps.Marker({
    position: item.position,
    map: map
  });

  addMarkerListeners(marker, item.infoWindowContent);
})

我还将addOpenInfoWindowListeners 方法更新为：

function addOpenInfoWindowListeners() {
  var infoWindowElement = document.querySelector('.gm-style .gm-style-iw').parentNode;

  infoWindowElement.addEventListener('mouseleave', function() {
    closeInfoWindow();
    mouseOverInfoWindow = false;
  });

  infoWindowElement.addEventListener('mouseenter', function() {
    mouseOverInfoWindow = true;
  });
}

我现在以.gm-style .gm-style-iw 的parentNode 为目标，并监听mouseleave 和mouseenter 事件（而不是mouseout 和mouseover）。这使得悬停功能适用于没有可滚动内容的信息窗口。