如何通过PHP+Google Maps API动态展示多地图（数据库坐标）

看起来你遇到的核心问题是重复ID和单次初始化逻辑导致只有第一个地图能正常渲染，下面一步步帮你修复：

问题根源拆解 #

1. 循环生成的所有地图容器都用了同一个id="map"，HTML中ID必须唯一，document.getElementById('map')只会返回第一个匹配的元素。
2. 经纬度隐藏输入框的id="latitude"和id="longitude"也是重复的，同样只能拿到第一组坐标值。
3. initMap函数仅执行一次，只初始化了第一个地图实例。

修改方案 #

步骤1：给每个地图和坐标设置唯一标识

我们可以用循环计数器或者数据库中湖泊的唯一ID（假设你的表有id字段），给每个元素生成唯一ID，同时把经纬度直接存在地图容器的data-*属性里（省去冗余的隐藏输入框）：

修改后的PHP/HTML代码：

<?php 
$counter = 0; // 也可以用$lakeRow['id']作为更稳定的唯一标识
while($lakeRow=mysql_fetch_array($res)) { 
    $mapId = "map-".$counter;
    $latitude = $lakeRow['latitude'];
    $longitude = $lakeRow['longitude'];
?>
<div class="col-md-4">
    <div class="thumbnail">
        <div class="more">
            <h4><?php echo $lakeRow['photo_caption_one'];?></h4>
        </div>
        <a href="" target="_blank">
            <?php echo '<img src="data:photo/jpeg;base64,'.base64_encode($lakeRow['photo'] ).'" height="300"/><br/>' ; ?>
            <div class="caption">
                <p><?php echo $lakeRow['photo_caption_one'] ; ?> .</p>
            </div>
            <div class="more">
                <!-- 用唯一ID和data属性存储坐标 -->
                <div id="<?php echo $mapId; ?>" 
                     class="map-container"
                     data-lat="<?php echo $latitude; ?>"
                     data-lng="<?php echo $longitude; ?>"
                     style="height: 253px" >
                </div>
            </div>
        </a>
    </div>
</div>
<?php $counter++; }?>

步骤2：修改JS函数，遍历所有地图容器初始化

把initMap改成遍历所有带.map-container类的元素，逐个创建地图和标记：

<script type="text/javascript">
function initMap() {
    // 获取所有地图容器
    const mapContainers = document.querySelectorAll('.map-container');
    
    mapContainers.forEach(container => {
        // 从data属性读取经纬度
        const lat = parseFloat(container.dataset.lat);
        const lng = parseFloat(container.dataset.lng);
        const latLng = { lat: lat, lng: lng };
        
        // 初始化当前地图实例
        const map = new google.maps.Map(container, {
            zoom: 10,
            center: latLng
        });
        
        // 添加对应坐标的标记
        new google.maps.Marker({
            position: latLng,
            map: map
        });
    });
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGMLRwrop1EGkgdzQ9a7zzREq4uw8l63k&callback=initMap">
</script>

额外优化建议 #

• 替换过时的mysql_fetch_array：这个函数已被PHP废弃，建议改用mysqli或PDO扩展，避免安全风险和兼容性问题。
• 把地图的内联样式style="height: 253px"移到CSS类中，方便统一维护样式。

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