Google Maps InfoWindow超出地图范围，官方示例也存在此问题

这其实是Google Maps JavaScript API里InfoWindow组件的一个已知边界定位缺陷，官方示例的基础实现并没有针对「标记点靠近地图容器边缘」的场景做适配处理。

问题核心原因 #

默认情况下，InfoWindow的定位逻辑是严格锚定到标记点的预设锚点位置（比如标记的顶部中心），完全不会自动检测自身是否会超出地图容器或者浏览器视口的范围。当标记点位于地图的边缘区域（比如右上角、左下角）时，InfoWindow就会被“挤”到地图甚至浏览器窗口外面。

为什么官方示例也会出现这个问题？ #

官方的基础示例仅仅是用来演示InfoWindow的核心用法，不会包含所有边界场景的处理逻辑——它们的目标是让开发者快速理解功能，而不是直接作为生产环境的代码使用。你在Safari和Chrome都能复现，说明这是API本身的基础行为，不是浏览器兼容性问题。

验证小技巧 #

你可以试着把示例里的标记点拖拽到地图中心区域，InfoWindow就会正常显示在地图内；但如果把标记点拖到地图容器的边缘，马上就能复现你遇到的“超出范围”问题。

简单修复思路 #

要解决这个问题，你需要手动添加边界检测逻辑，或者利用API提供的pixelOffset属性动态调整位置。举个基础的实现例子：

// 创建InfoWindow时，先设置基础偏移
const infoWindow = new google.maps.InfoWindow({
  content: '你的自定义内容',
  pixelOffset: new google.maps.Size(0, -20) // 基础偏移，避免遮挡标记
});

// 监听InfoWindow加载完成事件，动态调整位置
infoWindow.addListener('domready', () => {
  const map = infoWindow.getMap();
  const mapBounds = map.getBounds();
  const infoWindowPosition = infoWindow.getPosition();

  // 检查InfoWindow的位置是否在地图可视范围内
  if (!mapBounds.contains(infoWindowPosition)) {
    // 根据实际偏移需求计算调整量，这里只是示例逻辑
    const mapCenter = map.getCenter();
    const offsetX = infoWindowPosition.lng() > mapCenter.lng() ? -100 : 100;
    const offsetY = infoWindowPosition.lat() > mapCenter.lat() ? -80 : 80;

    infoWindow.setOptions({
      pixelOffset: new google.maps.Size(offsetX, offsetY)
    });
  }
});

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