如何通过while循环插入谷歌地图？答案

【问题标题】：How to insert google maps through a while loop?如何通过while循环插入谷歌地图？
【发布时间】：2016-02-29 13:26:45
【问题描述】：

我想在 div(html) 中插入一个 google 地图，它通过 while 循环 生成。谷歌地图从数据库中获取坐标。

由于我需要使用 google map api key，所以我使用了以下代码。

但是，它显示地图，仅在第一个div中，使用数据库的最后一个坐标，并且不显示任何其他 div 中的任何其他地图。

<?php 
    $connection = mysqli_connect('localhost', 'root', '', 'users');


    function currentUsers($connection){
        $sql = "SELECT * FROM user ";
        $result = mysqli_query($connection, $sql);

        if(mysqli_num_rows($result) > 0){
            while($row = mysqli_fetch_assoc($result)) {
                $userID = $row['id'];
                $firstName = $row['firstname'];
                $country = $row['country'];
                $latitude = $row['latitude'];
                $longitude = $row['longitude'];

                echo '<div> 
                            <div align = "left">
                                <h3>'. $userID. " ". $firstName. " ". $country. '</h3>
                            </div>

                            <div id  = "map" align = "right">
                                <script>    <!--Google map api-->
                                  function initMap() {
                                    var x = '. $latitude. ';
                                    var y = '. $longitude. ';
                                    var myLatLng = {lat: x, lng: y};

                                    var map = new google.maps.Map(document.getElementById(\'map\'), {
                                      center: myLatLng,
                                      scrollwheel: true,
                                      zoom: 4
                                    });

                                    var marker = new google.maps.Marker({
                                      map: map,
                                      position: myLatLng,
                                      title: \'Hello World!\'
                                    });
                                  }
                                </script>
                                <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
                            </div>  
                       </div>';
            }

        }else{
            echo "Currently there are no users!";
        }

        mysqli_close($connection);
    }

    currentUsers($connection);


?>

<html>
<head><title></title>
      <style> #map {width: 500px; height: 400px; } </style>  <!--Size of the map-->
</head>
<body></body>
</html>

【问题讨论】：

标签： javascript php html google-maps

【解决方案1】：

每个 div 的 ID 应该是唯一的。试试这个

<?php 
        $connection = mysqli_connect('localhost', 'root', '', 'users');


        function currentUsers($connection){
            $sql = "SELECT * FROM user ";
            $result = mysqli_query($connection, $sql);
            $x= 0;
            if(mysqli_num_rows($result) > 0){
                while($row = mysqli_fetch_assoc($result)) {
                    $userID = $row['id'];
                    $firstName = $row['firstname'];
                    $country = $row['country'];
                    $latitude = $row['latitude'];
                    $longitude = $row['longitude'];

                    echo '<div> 
                                <div align = "left">
                                    <h3>'. $userID. " ". $firstName. " ". $country. '</h3>
                                </div>

                                <div id  = "map_'.$x.'" align = "right">
                                    <script>    <!--Google map api-->
                                      function initMap() {
                                        var x = '. $latitude. ';
                                        var y = '. $longitude. ';
                                        var myLatLng = {lat: x, lng: y};

                                        var map = new google.maps.Map(document.getElementById("map_'.$x.'"), {
                                          center: myLatLng,
                                          scrollwheel: true,
                                          zoom: 4
                                        });

                                        var marker = new google.maps.Marker({
                                          map: map,
                                          position: myLatLng,
                                          title: \'Hello World!\'
                                        });
                                      }
                                    </script>
                                    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
                                </div>  
                           </div>';
                           $x++;
                }

            }else{
                echo "Currently there are no users!";
            }

            mysqli_close($connection);
        }

        currentUsers($connection);


    ?>

    <html>
    <head><title></title>
          <style> #map {width: 500px; height: 400px; } </style>  <!--Size of the map-->
    </head>
    <body></body>
    </html>

【讨论】：

感谢您的回复。但它不起作用。现在，它不加载任何地图。 API似乎不允许加载多个地图..

【解决方案2】：

您只能可靠地包含 API 一次。目前，您正在为添加的每个地图添加 API。
您也可以只拥有一个名为 initMap 的函数，目前您包含该函数的多个版本。
您只能有一个 id="map" 的 div，目前每个位置都有一个。

相关问题（仅限javascript，无PHP）：Adding multiple map canvases to window - Google Maps Javascript API v3

【讨论】：

【解决方案3】：

这对我来说是 100% 工作我已经测试了这段代码

<?php
$arr='';
$connection = mysqli_connect('localhost', 'root', '', 'users');


    function currentUsers($connection){
        $sql = "SELECT * FROM user";
        $result = mysqli_query($connection, $sql);
        $x= 0;
        if(mysqli_num_rows($result) > 0){
            while($row = mysqli_fetch_assoc($result)) {
                $userID = $row['id'];
                $firstName = $row['firstname'];
                $country = $row['country'];
                $arr[] = array($row['latitude'],$row['longitude'],$x);
                echo '<div style="width:100%;"> 
                            <div style="width:250px; height: 150px; float :left;">
                                <h3>'. $userID. ". ". $firstName. " ". $country. '</h3>
                            </div>
                            <div id  = "map_'.$x.'"  style="width:250px;height: 150px;">   </div>
                      </div>';
                       $x++;
            }
        echo '<script> var mymaps ='.json_encode($arr).'</script>';

        }else{
            echo "Currently there are no users!";
        }

        mysqli_close($connection);
    }
    currentUsers($connection);
?>

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>

<script>
var maps = []; 

function initialize(id, myLatLng) { 
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
        zoom: 9,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    maps[id] = new google.maps.Map(document.getElementById('map_'+id), 
        mapOptions);

    var marker = new google.maps.Marker({
       map: maps[id],
       position: myLatLng,
       title: 'Hello World!'
    });
}

$(document).ready(function(){
    for( var i = 0; i < mymaps.length; i++)
    {
        var x = parseFloat(mymaps[i][0]);
        var y = parseFloat(mymaps[i][1]);
        var myLatLng = {lat: x, lng: y};
        google.maps.event.addDomListener(window, 'load', initialize(mymaps[i][2],myLatLng)); // two calls
    }

});
</script>

【讨论】：