Question

我想用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>

我的问题是只显示最后一张地图，而其他地图则不会渲染地图。我不应该在循环中编写脚本吗？感谢。

Answer 1

Whilst not tested I'd suggest an approach similar to this perhaps. Create a javascript variable with all the original data from the php variable $clinics - in this case json - and use the initMap function to iterate through that variable/data, creating a map object on each iteration.

<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>";
    }
?>

Answer 2

你应该使用foreach .. : end foreach例如：

<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 endforeach; ?>
  </div>

Answer 3

我们尝试了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>";
    }
?>

使用MySQL和使用循环的数据在单个页面上显示多个谷歌地图

3 个答案: