Php 在一个页面上显示多个google地图，其中包含来自MySQL的数据并使用循环

我想从MySQL显示多个带有我的纬度和经度的谷歌地图，我使用循环。这是我的密码：

    <style>         
        .my_map {
            height: 400px;
            width: 100%;
        }
    </style>

    <div>
        <?php
            foreach($clinics AS $clinic) {
        ?>
                <div class="my_map" id="map_<?php print($clinic->id); ?>" >
                    <script>
                        var map;

                        function initMap() {
                            map = new google.maps.Map(document.getElementById('map_<?php print($clinic->id); ?>'), {
                                    center: {lat: <?php print($clinic->latitude); ?>, lng: <?php print($clinic->longitude); ?>},
                                    zoom: 16
                            });
                        }
                    </script>
                </div>
        <?php 
            }
        ?>
    </div>


    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE&callback=initMap">
    </script>

我的问题是只显示最后一个贴图，而之前的其他贴图不渲染贴图。我不应该在循环中编写脚本吗？谢谢。

您应该使用foreach..：每个示例的结尾：

---

虽然未经测试，但我建议采用类似的方法。使用php变量$clinics中的所有原始数据创建一个javascript变量（在本例中为json），并使用initMap函数迭代该变量/数据，在每次迭代中创建一个映射对象

<style>         
    .my_map {
        height: 400px;
        width: 100%;
    }
</style>
<script async defer src="//maps.googleapis.com/maps/api/js?key=MY_KEY_HERE&callback=initMap"></script>
<script>

    var obj,map;

    <?php

        /*
            assuming that `$clinics` is an array and that each member is also an array
            with constituent keys id,latitude,longitude which is how it appears to be 
            from the original question

            encode as json data
        */
        $json=json_encode( $clinics );

        /* create javascript variable with data */
        echo "
            var json={$json};
        ";

    ?>
    function initMap(){
        /* iterate through json data */
        for( var n in json ){
            obj=json[n];
            map=new google.maps.Map( document.querySelector('div[ data-id="'+n+'" ]'),{
                center:{ lat:parseFloat( obj.latitude ), lng:parseFloat( obj.longitude ) },
                zoom:16
            });
        }
    }
</script>

<?php
    /*
        generate containers to hold each map based upon original array
    */
    foreach( $clinics as $index => $clinic ){
        echo "<div class='my_map' data-id='{$index}'></div>";
    }
?>

---

我们尝试了RamRaider建议的代码，但无法显示地图。为了让它工作，我们必须将初始化脚本调用附加到页面的末尾。因此，该守则成为：

<style>         
    .my_map {
        height: 400px;
        width: 100%;
    }
</style>
<script>
    jQuery(function() {
        // Asynchronously Load the map API
        var script = document.createElement('script');
        script.src = "//maps.googleapis.com/maps/api/js?key=MY_KEY_HERE&callback=initMap";
        document.body.appendChild(script);
    });

    var obj,map;

    <?php

        /*
            assuming that `$clinics` is an array and that each member is also an array
            with constituent keys id,latitude,longitude which is how it appears to be 
            from the original question

            encode as json data
        */
        $json=json_encode( $clinics );

        /* create javascript variable with data */
        echo "
            var json={$json};
        ";

    ?>
    function initMap(){
        /* iterate through json data */
        for( var n in json ){
            obj=json[n];
            map=new google.maps.Map( document.querySelector('div[ data-id="'+n+'" ]'),{
                center:{ lat:parseFloat( obj.latitude ), lng:parseFloat( obj.longitude ) },
                zoom:16
            });
        }
    }
</script>

<?php
    /*
        generate containers to hold each map based upon original array
    */
    foreach( $clinics as $index => $clinic ){
        echo "<div class='my_map' data-id='{$index}'></div>";
    }
?>

---

该脚本不应在循环中编写。标记需要在循环中。请检查此链接并根据需要修改代码。它起作用了

<style>         
    .my_map {
        height: 400px;
        width: 100%;
    }
</style>
<script>
    jQuery(function() {
        // Asynchronously Load the map API
        var script = document.createElement('script');
        script.src = "//maps.googleapis.com/maps/api/js?key=MY_KEY_HERE&callback=initMap";
        document.body.appendChild(script);
    });

    var obj,map;

    <?php

        /*
            assuming that `$clinics` is an array and that each member is also an array
            with constituent keys id,latitude,longitude which is how it appears to be 
            from the original question

            encode as json data
        */
        $json=json_encode( $clinics );

        /* create javascript variable with data */
        echo "
            var json={$json};
        ";

    ?>
    function initMap(){
        /* iterate through json data */
        for( var n in json ){
            obj=json[n];
            map=new google.maps.Map( document.querySelector('div[ data-id="'+n+'" ]'),{
                center:{ lat:parseFloat( obj.latitude ), lng:parseFloat( obj.longitude ) },
                zoom:16
            });
        }
    }
</script>

<?php
    /*
        generate containers to hold each map based upon original array
    */
    foreach( $clinics as $index => $clinic ){
        echo "<div class='my_map' data-id='{$index}'></div>";
    }
?>