如何在Google Maps中添加多个自定义弹出窗口

核心思路是基于官方示例中的自定义Popup覆盖类，通过多次实例化该类并传入不同的坐标位置和弹窗内容，就能在地图上创建多个独立的自定义弹出窗口。

实现步骤 #

1. 复用官方Popup类：这个类已经封装了自定义覆盖物的核心逻辑（位置设置、DOM渲染、地图交互），直接拿来用即可。
2. 准备多标记点数据：定义包含每个弹窗的坐标和内容的数组，方便批量创建。
3. 批量创建并添加弹窗：初始化地图后，遍历数据数组，为每个元素创建Popup实例并绑定到地图。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <title>Google Maps 多自定义弹窗示例</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <style>
    /* 弹窗样式可自定义，和官方示例一致 */
    .popup {
      position: absolute;
      background-color: white;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
      pointer-events: auto;
      bottom: 12px;
      left: -50px;
      width: 200px;
    }
    .popup::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50px;
      margin-left: -12px;
      border-width: 12px;
      border-style: solid;
      border-color: white transparent transparent transparent;
    }
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    // 官方示例中的Popup类，无需修改
    class Popup extends google.maps.OverlayView {
      constructor(position, content, map) {
        super();
        this.position = position;
        this.content = content;
        this.map = map;
        this.div = null;
        this.setMap(map);
      }

      onAdd() {
        this.div = document.createElement("div");
        this.div.className = "popup";
        this.div.innerHTML = this.content;
        this.div.style.position = "absolute";

        const panes = this.getPanes();
        panes.overlayMouseTarget.appendChild(this.div);
      }

      draw() {
        const overlayProjection = this.getProjection();
        const point = overlayProjection.fromLatLngToDivPixel(this.position);

        if (point) {
          this.div.style.left = point.x + "px";
          this.div.style.top = point.y + "px";
        }
      }

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

    // 初始化地图
    function initMap() {
      const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 10,
        center: { lat: 39.9042, lng: 116.4074 } // 以北京为中心示例
      });

      // 多弹窗数据：每个元素包含坐标和弹窗内容
      const popupData = [
        {
          lat: 39.9042,
          lng: 116.4074,
          content: "<h3>天安门</h3><p>北京的地标建筑</p>"
        },
        {
          lat: 39.9139,
          lng: 116.3916,
          content: "<h3>故宫博物院</h3><p>明清皇家宫殿</p>"
        },
        {
          lat: 39.9289,
          lng: 116.3883,
          content: "<h3>天坛</h3><p>古代祭天场所</p>"
        }
      ];

      // 循环创建并添加弹窗到地图
      popupData.forEach(item => {
        const position = new google.maps.LatLng(item.lat, item.lng);
        new Popup(position, item.content, map);
      });
    }

    // 加载地图时执行初始化
    google.maps.event.addDomListener(window, "load", initMap);
  </script>
</body>
</html>

关键说明 #

• Popup类：负责处理弹窗的创建、定位和销毁，是官方示例的核心，它继承自google.maps.OverlayView，符合Google Maps的覆盖物规范。
• 批量创建：通过遍历popupData数组，为每个地点生成独立的Popup实例，每个弹窗拥有自己的位置和内容，相互独立。
• 样式自定义：.popup类的CSS可以根据需求修改，比如调整背景、阴影、箭头样式等。

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