求助：如何用Google Maps API添加带描述的多标记

阿华AIGC实验室

2026-5-20

如何用Google Maps API添加多个带自定义描述的标记

嘿，这事儿其实挺简单的，核心思路就是把所有要标记的位置信息（坐标、自定义描述）整理成一个数组，然后通过循环批量创建标记和对应的信息窗口就行——不管你要加11个还是更多，都能轻松搞定。我给你一步步拆解：

第一步：整理位置数据数组

先把你那11个位置的信息都放进一个数组里，每个元素包含纬度、经度和你要显示的自定义描述：

// 示例数组，你替换成自己的11个位置数据就行
const locations = [
  { lat: 40.7128, lng: -74.0060, description: "纽约市：美国最大的城市，金融中心" },
  { lat: 34.0522, lng: -118.2437, description: "洛杉矶：好莱坞所在地，加州娱乐之都" },
  { lat: 41.8781, lng: -87.6298, description: "芝加哥：中西部交通枢纽" },
  // 在这里继续添加剩下8个位置的信息...
];

第二步：初始化地图并循环创建标记

在地图初始化的函数里，遍历上面的数组，给每个位置创建标记，同时绑定点击显示描述的信息窗口：

function initMap() {
  // 先初始化地图，设置中心点和缩放级别，你可以根据自己的需求调整
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 37.0902, lng: -95.7129 } // 美国本土中心坐标，换成你需要的中心点即可
  });

  // 遍历位置数组，批量创建标记和信息窗口
  locations.forEach(location => {
    // 创建标记
    const marker = new google.maps.Marker({
      position: { lat: location.lat, lng: location.lng },
      map: map,
      // 可选：添加自定义图标，去掉注释并替换成你的图标路径
      // icon: './custom-marker.png'
    });

    // 创建信息窗口，内容就是自定义描述
    const infoWindow = new google.maps.InfoWindow({
      content: location.description
    });

    // 给标记绑定点击事件：点击时弹出信息窗口
    marker.addListener("click", () => {
      infoWindow.open(map, marker);
    });
  });
}

第三步：确保页面正确引入API脚本

最后在HTML里引入Google Maps API脚本（记得替换成你的API密钥），同时要有一个用来显示地图的div：

<!-- 引入Google Maps API，替换YOUR_API_KEY为你的密钥 -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

<!-- 地图容器，设置好宽高 -->
<div id="map" style="height: 500px; width: 100%;"></div>