MarkerClustererPlus结合mouseover/mouseout导致InfoWindow闪烁问题求助

这个闪烁问题的根源很明确——你用的mouseover和mouseout事件对元素内部的子元素太敏感了！MarkerClustererPlus生成的聚类标记是一个嵌套DOM结构：外层是聚类的背景容器，内层是显示计数的文本元素。当你的鼠标在背景和计数文本之间移动时，浏览器会认为你“离开”了外层容器（触发mouseout），紧接着又“进入”了子元素（触发mouseover冒泡到外层），这就导致InfoWindow反复开关，出现闪烁。

解决这个问题的最优方案是把mouseover/mouseout换成mouseenter/mouseleave事件。这两个事件的行为更符合你的预期：只有当鼠标真正进入整个聚类元素区域时才触发mouseenter，真正离开整个聚类元素区域时才触发mouseleave，完全不会因为鼠标在聚类内部的子元素间移动而反复触发。

接下来给你修改后的代码示例：

AngularJS + ngMap 版本 #

NgMap.getMap().then(function(map) {
  // 假设你已经创建并收集了所有标记到markers数组中
  var markerCluster = new MarkerClusterer(map, markers, {
    // 你的聚类配置项，比如imagePath、gridSize等
  });

  // 复用一个InfoWindow实例，避免重复创建
  let clusterInfoWindow = new google.maps.InfoWindow();

  // 替换mouseover为mouseenter
  google.maps.event.addListener(markerCluster, 'mouseenter', function(cluster) {
    // 构建聚类内所有标记的详情内容
    let contentHtml = '<div class="cluster-info"><h4>聚类包含的标记:</h4><ul>';
    cluster.getMarkers().forEach(marker => {
      contentHtml += `<li>${marker.title || '无标题标记'}</li>`;
    });
    contentHtml += '</ul></div>';

    clusterInfoWindow.setContent(contentHtml);
    clusterInfoWindow.setPosition(cluster.getCenter());
    clusterInfoWindow.open(map);
  });

  // 替换mouseout为mouseleave
  google.maps.event.addListener(markerCluster, 'mouseleave', function() {
    clusterInfoWindow.close();
  });
});

纯JavaScript 版本 #

const map = new google.maps.Map(document.getElementById('map'), {
  zoom: 5,
  center: new google.maps.LatLng(39.8283, -98.5795)
});

const markers = [];
// 这里添加你的标记到markers数组...

const markerCluster = new MarkerClusterer(map, markers);
let clusterInfoWindow = new google.maps.InfoWindow();

google.maps.event.addListener(markerCluster, 'mouseenter', function(cluster) {
  let content = '<div>';
  cluster.getMarkers().forEach(marker => {
    content += `<p>${marker.title}</p>`;
  });
  content += '</div>';
  
  clusterInfoWindow.setContent(content);
  clusterInfoWindow.setPosition(cluster.getCenter());
  clusterInfoWindow.open(map);
});

google.maps.event.addListener(markerCluster, 'mouseleave', function() {
  clusterInfoWindow.close();
});

额外注意事项 #

1. 尽量复用同一个InfoWindow实例，避免每次触发事件都创建新的，这样能提升性能，也避免多个InfoWindow同时打开的问题。
2. 如果你的聚类样式有自定义修改，确保mouseenter/mouseleave事件依然能正确绑定到聚类的容器元素上——MarkerClustererPlus的事件是绑定在它生成的聚类标记对象上的，所以不需要额外处理DOM元素的事件绑定。

内容的提问来源于stack exchange，提问作者Farhan Ghumra