Google Maps 2024 JS API循环添加多标记仅显示最后一个问题

问题根源 #

这种情况最常见的原因是循环中变量作用域导致的引用共享——即使你尝试用const/var声明标记变量，若循环写法未保证迭代的独立作用域，所有标记最终会绑定到最后一组数据上。控制台显示标记存在且坐标正确，说明标记对象已创建，但作用域问题导致它们的地图绑定逻辑出现异常。

修复方案 #

1. 改用块级作用域的循环变量 #

如果用传统for循环，必须用let声明循环索引（而非var），确保每次迭代都有独立的作用域：

// 示例坐标数组
const locations = [
  { lat: 39.9042, lng: 116.4074 },
  { lat: 31.2304, lng: 121.4737 },
  { lat: 23.1291, lng: 113.2644 }
];

// 正确的for循环写法
for (let i = 0; i < locations.length; i++) {
  const pos = locations[i];
  const marker = new google.maps.Marker({
    position: pos,
    map: map, // 确保map是已初始化的有效地图实例
    title: `标记 ${i+1}`
  });
}

2. 使用forEach迭代数组（更推荐） #

forEach的回调函数自带独立作用域，彻底规避作用域共享问题：

locations.forEach((pos, idx) => {
  new google.maps.Marker({
    position: pos,
    map: map,
    title: `标记 ${idx+1}`
  });
});

3. 验证地图实例绑定 #

确认所有标记的map属性都指向同一个已完成初始化的地图实例，避免因异步加载顺序问题导致标记绑定到未就绪的地图对象上。

额外检查点 #

• 打印每个标记的map属性，确认其与当前地图实例一致
• 若标记附带信息窗口，需将信息窗口的创建逻辑也放在迭代的独立作用域内

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