如何在PHP中遍历关联数组并正确显示谷歌地图InfoWindow

我来帮你搞定这个问题！你现在遇到的核心问题是没有把完整的关联数组传递给JS，同时InfoWindow的内容硬绑定了单条数据，咱们一步步修改：

问题根源拆解 #

• 你当前只把PHP数组的第一个元素（$this->getCoordinatesMaps[0]）传给了JS的markers变量，导致JS只能拿到一组数据
• InfoWindow的内容直接用了PHP中第一个元素的comune和mansione_tecnica，不管点击哪个标记，都只会显示这组固定内容

修改后的完整代码 #

function myMap() {
    var infowindow = new google.maps.InfoWindow();
    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(44.849716, 10.052282),
        mapTypeId: 'roadmap',
        styles: []
    };
    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);
    
    // 传递整个PHP数据数组给JS，而不是仅第一个元素
    var markers = <?= json_encode($this->getCoordinatesMaps); ?>; 

    // 遍历所有标记数据
    for(var i = 0; i < markers.length; i++) {
        var markerData = markers[i];
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(markerData.lat, markerData.long),
            map: map,
            title: 'Niente',
            clickable: true
        });

        // 用闭包保存当前标记的对应数据，避免循环变量覆盖问题
        google.maps.event.addListener(marker, 'click', (function(currentMarkerData) {
            return function() {
                // 动态生成当前标记的InfoWindow内容
                infowindow.setContent(`${currentMarkerData.comune} - ${currentMarkerData.mansione_tecnica}`);
                infowindow.open(map, this);
            }
        })(markerData));
    }
}

核心修改说明 #

• 传递完整数组：把json_encode($this->getCoordinatesMaps[0])改为json_encode($this->getCoordinatesMaps)，让JS能获取所有从MySQL提取的经纬度和关联字符串数据
• 优化遍历逻辑：改用普通for循环（而非for...in）遍历数组，避免遍历对象时可能出现的非数组属性干扰
• 闭包绑定对应数据：在事件监听的立即执行函数中传入当前循环的markerData，确保每个标记的点击事件都能访问到自己对应的那组数据（解决循环变量提升导致的所有事件共享最后一条数据的问题）
• 动态生成内容：直接使用闭包保存的currentMarkerData拼接InfoWindow内容，实现每个标记显示对应的数据

这样修改后，点击任何标记，InfoWindow都会正确显示该标记对应的comune和mansione_tecnica信息了。

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