Google Maps API custom overlay跳转至重复地图副本问题排查

尝试创建覆盖世界地图大部分区域（理想状态为全球覆盖）的自定义覆盖层，计划在覆盖层内部使用SVG或Canvas元素，仅露出地图的选定区域。以下代码可复现遇到的问题：

复现代码 #

JavaScript #

function initMap() {
  const map = new google.maps.Map(
    document.getElementById("map"), {
      zoom: 1,
      center: {
        lat: 0,
        lng: 0
      },
    }
  );

  const bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-20, -100),
    new google.maps.LatLng(+20, 100)
  );

  class CustomOverlay extends google.maps.OverlayView {
    bounds_
    div_

    constructor(bounds, image) {
      super();
      this.bounds_ = bounds;
      this.div_ = null;
    }

    onAdd() {
      this.div_ = document.createElement("div");
      this.div_.style.width = '100%'
      this.div_.style.height = '100%'
      this.div_.style.position = "absolute";
      this.div_.style.background = "red"

      const panes = this.getPanes();

      panes.overlayLayer.appendChild(this.div_);
    }

    draw() {
      const overlayProjection = this.getProjection();
      const sw = overlayProjection.fromLatLngToDivPixel(
        this.bounds_.getSouthWest()
      );
      const ne = overlayProjection.fromLatLngToDivPixel(
        this.bounds_.getNorthEast()
      );

      if (this.div_) {
        this.div_.style.left = sw.x + "px";
        this.div_.style.top = ne.y + "px";
        this.div_.style.width = ne.x - sw.x + "px";
        this.div_.style.height = sw.y - ne.y + "px";
      }
    }

    onRemove() {
      if (this.div_) {
        (this.div_.parentNode).removeChild(this.div_);
        this.div_ = null;
      }
    }
  }

  const overlay = new CustomOverlay(bounds);

  overlay.setMap(map);
}

window.initMap = initMap;

CSS #

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML #

<html>
<head>
  <title>Rectangle Zoom</title>
</head>
<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly" defer></script>
</body>
</html>

放大红色矩形覆盖层东部的区域（如斯里兰卡、马来西亚）时，覆盖层会消失。缩小地图平移后可发现，覆盖层并未实际被移除，只是偏移到了东侧相邻的重复地图副本上。

• 禁用地图重复效果（仅展示单张世界地图）：尝试过限制地图滚动区域，无法解决问题
• 将覆盖层锁定在正确的地图副本上，或在所有重复的地图副本上都展示该覆盖层：未找到可行实现方式
• 替换Custom Overlay为其他实现方案：Polygon、Rectangle类无法满足需求，因为需要在地图内部放置图片或自定义HTML元素

Google Maps在低缩放级别下会水平无限重复渲染世界地图，fromLatLngToDivPixel返回的是基于无限延伸墨卡托平面的全局像素坐标，当平移到180度经线以东区域时，初始定义的覆盖层边界对应的像素坐标会落在当前视口外的东侧重复地图上，造成覆盖层“消失”的错觉。

核心逻辑是在draw方法中校准覆盖层的像素偏移，让它始终落在当前视口对应的世界地图副本范围内：

1. 先计算当前缩放级别下单张世界地图的像素宽度：const worldWidth = 256 * Math.pow(2, map.getZoom())
2. 对计算得到的覆盖层左偏移值取模，校准到[-worldWidth/2, worldWidth/2]的当前视口区间内
3. 如果需要覆盖层在所有可见的重复地图副本上都显示，可循环计算视口内存在的所有世界副本位置，为每个副本渲染对应覆盖层元素

修改后的draw方法参考：

draw() {
  const overlayProjection = this.getProjection();
  const sw = overlayProjection.fromLatLngToDivPixel(
    this.bounds_.getSouthWest()
  );
  const ne = overlayProjection.fromLatLngToDivPixel(
    this.bounds_.getNorthEast()
  );
  // 计算当前缩放级别下世界地图的单幅像素宽度
  const worldWidth = 256 * Math.pow(2, this.getMap().getZoom());
  // 校准x轴偏移，避免跑到相邻重复地图上
  let offsetX = sw.x % worldWidth;
  if (offsetX > worldWidth / 2) offsetX -= worldWidth;
  if (offsetX < -worldWidth / 2) offsetX += worldWidth;

  if (this.div_) {
    this.div_.style.left = offsetX + "px";
    this.div_.style.top = ne.y + "px";
    this.div_.style.width = ne.x - sw.x + "px";
    this.div_.style.height = sw.y - ne.y + "px";
  }
}

注意：如果你的覆盖层宽度超过单幅世界地图宽度（比如做全球覆盖的遮罩层），校准偏移后需要判断视口范围内可见的世界副本数量，在每个副本对应位置渲染覆盖层，避免平移时出现遮罩缝隙。

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