React Google Maps InfoWindow弹窗闪烁与指针边界触发问题

我使用@react-google-maps/api的InfoWindow组件实现地图弹窗，期望效果：

• 鼠标悬停地图标记时弹出弹窗
• 鼠标在标记或弹窗上时，弹窗保持显示
• 离开标记和弹窗后弹窗消失

目前实现了近似效果，但存在两个问题：

1. 弹窗出现闪烁
2. 弹窗内触发指针事件的范围仅为内部div，小于InfoWindow本身

推测核心原因：InfoWindow显示后会遮挡标记，而指针事件（onPointerEnter/onPointerLeave）绑定在InfoWindow内部的div上。当鼠标从标记移到InfoWindow但未落在div区域时，弹窗会消失，随后鼠标再次触发标记的onMouseOver，导致弹窗重新显示，如此循环引发闪烁。

请问能否让内部div完全覆盖InfoWindow，或直接为InfoWindow绑定onPointerEnter/onPointerLeave事件？

方案1：让内部div完全覆盖InfoWindow #

Google Maps的InfoWindow自带默认内边距，只需给内部div设置负边距抵消默认内边距，同时开启border-box盒模型，就能让div覆盖整个InfoWindow的可交互区域。

修改内部div的样式和事件绑定：

<div
  onPointerEnter={() => {
    setIsMouseOverInfoWindow(true);
    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
  }}
  onPointerLeave={() => {
    setIsMouseOverInfoWindow(false);
    setSelectedPlace(null);
  }}
  style={{
    width: '100%',
    height: '100%',
    padding: '10px',
    margin: '-8px', // 抵消InfoWindow默认的8px内边距
    backgroundColor: "#23a681",
    boxSizing: 'border-box',
    cursor: 'default'
  }}
>
  <h4>{selectedPlace.name}</h4>
  <p>{selectedPlace.address}</p>
</div>

方案2：直接为InfoWindow绑定原生指针事件 #

通过@react-google-maps/api的InfoWindow组件的onLoad回调，获取原生Google Maps InfoWindow实例，直接给实例绑定mouseover和mouseout事件，监听整个弹窗的指针交互。

修改InfoWindow的实现：

{selectedPlace && (
  <InfoWindow
    position={selectedPlace.position}
    options={{ disableAutoPan: true }}
    onLoad={(infoWindowInstance) => {
      // 绑定原生鼠标事件
      const mouseOverHandler = () => {
        setIsMouseOverInfoWindow(true);
        if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
      };
      const mouseOutHandler = () => {
        setIsMouseOverInfoWindow(false);
        setSelectedPlace(null);
      };

      infoWindowInstance.addListener('mouseover', mouseOverHandler);
      infoWindowInstance.addListener('mouseout', mouseOutHandler);

      // 组件卸载时移除事件监听，避免内存泄漏
      return () => {
        google.maps.event.removeListener(mouseOverHandler);
        google.maps.event.removeListener(mouseOutHandler);
      };
    }}
  >
    <div style={{ padding: '10px', backgroundColor: "#23a681" }}>
      <h4>{selectedPlace.name}</h4>
      <p>{selectedPlace.address}</p>
    </div>
  </InfoWindow>
)}

额外优化：完善标记的事件逻辑 #

调整标记的onMouseOut延迟逻辑，确保鼠标有足够时间移动到弹窗上，同时避免不必要的弹窗切换：

onMouseOut={() => {
  closeTimeoutRef.current = setTimeout(() => {
    if (!isMouseOverInfoWindow) setSelectedPlace(null);
  }, 200); // 缩短延迟提升交互流畅度
}}

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