这个问题我之前也碰到过，核心就是在拖动的不同阶段精准控制InfoWindow的状态和鼠标事件的绑定，下面给你一套可行的实现方案：

核心思路 #

• 拖动开始时：关闭当前打开的InfoWindow，暂时移除mouseover/mouseout事件，避免拖动过程中误触发
• 拖动结束后：重新绑定mouseover/mouseout事件，恢复原本的悬停显示功能

具体代码实现 #

假设你已经有了基础的多边形和InfoWindow实例，我们可以这样改造：

// 先定义你的InfoWindow和Polygon实例
const infoWindow = new google.maps.InfoWindow();
const polygon = new google.maps.Polygon({
  // 你的多边形配置：路径、样式等
  paths: yourPolygonPaths,
  draggable: true, // 确保开启拖动功能
  // ...其他配置
});

// 定义复用的鼠标事件处理函数，方便后续绑定/解绑
function handlePolygonMouseOver() {
  infoWindow.setContent('你的多边形信息内容');
  // 这里可以根据多边形的位置动态设置InfoWindow的位置，比如取中心
  const center = google.maps.geometry.spherical.computeCentroid(polygon.getPath());
  infoWindow.setPosition(center);
  infoWindow.open(map);
}

function handlePolygonMouseOut() {
  infoWindow.close();
}

// 初始绑定鼠标事件
polygon.addListener('mouseover', handlePolygonMouseOver);
polygon.addListener('mouseout', handlePolygonMouseOut);

// 监听拖动开始事件
polygon.addListener('dragstart', () => {
  // 立即关闭InfoWindow
  infoWindow.close();
  // 移除鼠标悬停事件，避免拖动过程中误触发
  google.maps.event.removeListener(polygon.getListeners('mouseover')[0]);
  google.maps.event.removeListener(polygon.getListeners('mouseout')[0]);
});

// 监听拖动结束事件
polygon.addListener('dragend', () => {
  // 重新绑定鼠标悬停事件，恢复原有功能
  polygon.addListener('mouseover', handlePolygonMouseOver);
  polygon.addListener('mouseout', handlePolygonMouseOut);
  // 如果需要拖动结束后立即显示InfoWindow，可以在这里调用handlePolygonMouseOver()
  // handlePolygonMouseOver();
});

关键细节说明 #

1. 复用事件处理函数：把mouseover和mouseout的逻辑抽成独立函数，这样绑定和解绑都更方便，不用重复写逻辑。
2. dragstart时移除事件：拖动过程中鼠标可能一直停留在多边形上，如果不移除mouseover事件，会导致InfoWindow重新打开且位置还是拖动前的，所以必须暂时禁用这些事件。
3. dragend时恢复事件：拖动完成后，用户需要继续使用悬停显示InfoWindow的功能，所以要重新绑定事件。
4. 动态设置InfoWindow位置：如果希望悬停时InfoWindow始终在多边形中心，用computeCentroid计算多边形中心是个不错的选择，这样即使多边形形状改变，位置也能对应上。

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