基于MySQL数据循环渲染多个Google Maps仅最后一个显示的问题咨询

嘿，你遇到的这个问题我之前也帮人排查过，确实和你在循环里写脚本的方式有直接关系！

问题根源 #

你之所以只有最后一个地图能显示，核心原因是JavaScript的作用域特性+Google Maps的异步初始化逻辑：

• 如果你在循环里重复定义相同的变量（比如每次都写var map = new google.maps.Map(...)），var没有块级作用域，后面的变量会直接覆盖前面的；
• Google Maps的初始化是异步的，当API真正完成加载时，循环已经跑完了，所有初始化逻辑都会指向循环最后一次的变量值（比如最后一个容器ID、最后一组经纬度），自然只有最后一个地图能渲染。

解决方案：把初始化逻辑和循环分离 #

正确的做法是：先通过循环生成所有独立的地图容器，再把所有地图的配置数据收集起来，最后统一调用初始化函数，用函数作用域隔离每个地图的变量。

举个实际的例子（假设你用PHP从MySQL取数）：

<?php
// 从MySQL查询得到的经纬度数据示例
$locations = [
    ['id' => 1, 'lat' => 39.9042, 'lng' => 116.4074],
    ['id' => 2, 'lat' => 31.2304, 'lng' => 121.4737],
    ['id' => 3, 'lat' => 23.1291, 'lng' => 113.2644]
];
?>

<!-- 先加载Google Maps API，替换成你的密钥 -->
<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initAllMaps" async defer></script>

<!-- 循环生成唯一的地图容器 -->
<?php foreach($locations as $loc): ?>
    <div id="map-<?= $loc['id'] ?>" style="width: 400px; height: 300px; margin: 20px 0;"></div>
<?php endforeach; ?>

<script>
// 收集所有地图的配置信息
const mapConfigs = [
    <?php foreach($locations as $loc): ?>
        {
            containerId: 'map-<?= $loc['id'] ?>',
            lat: <?= $loc['lat'] ?>,
            lng: <?= $loc['lng'] ?>
        },
    <?php endforeach; ?>
];

// 统一初始化所有地图
function initAllMaps() {
    mapConfigs.forEach(config => {
        // 每个地图用独立的容器和坐标，变量不会互相覆盖
        const map = new google.maps.Map(document.getElementById(config.containerId), {
            center: { lat: config.lat, lng: config.lng },
            zoom: 12
        });
        // 可以给每个地图加标记
        new google.maps.Marker({
            position: { lat: config.lat, lng: config.lng },
            map: map,
            title: `地点${config.containerId.split('-')[1]}`
        });
    });
}
</script>

额外注意事项 #

1. 每个地图容器必须设置明确的宽高，否则地图会因为没有尺寸而显示不出来；
2. 确保你的Google Maps API密钥已经启用了「Maps JavaScript API」权限；
3. 如果是前端JS循环处理数据（比如从接口拿数据），逻辑也是一样的：先渲染所有容器，收集配置，再统一初始化。

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