PHP/Javascript - 在 while 循环中从 mysql 数据库在谷歌地图上显示标记

Question

我有一个 while 循环，它显示我的数据库中的数据，例如姓名地址等。我希望谷歌地图循环使用数据库中的地址。 目前，谷歌地图只出现一次，我认为它不会循环地图旁边列出的相同地址。

<script src="https://maps.google.com/maps/api/js?key=[KEY-HERE]&signed_in=true&callback=initMap"async defer></script>

while ($row = mysql_fetch_assoc($query)) {

echo "<div class='result-container'>

    <div class='result-wrap'>

        <div class='leftbox'> 

            <div class='titlebox'>
                <h2>" . $row['company_name'] . "</h2>
            </div>

            <div class='box'>
                " . ((empty($row['address_1'])) ? '' : "<strong> Address: </strong>" . $row['address_1']) . ((empty($row['address_2'])) ? '' : ",&nbsp" . $row['address_2']) . ((empty($row['town'])) ? '' : ",&nbsp" . $row['town']) . ((empty($row['county'])) ? '' : ",&nbsp" . $row['county']) . ((empty($row['postcode'])) ? '' : ",&nbsp" . $row['postcode']) . "
            </div>

            <div class='box'>
                " . ((empty($row['tel'])) ? '' : "<strong> Telephone: </strong>" . $row['tel']) . ((empty($row['mobile'])) ? '' : "<strong> Mobile: </strong>" . $row['mobile']) . "
            </div>          

        </div> 

        <div class='rightbox'>

                <div class='service-pic'>
                 <img src='img/buddy.png' class='hvr-bob'>
                </div>                      

            <div id='map' style='width: 250px; height: 250px;'></div> 

        </div>

        </div><br/>";

  }

<script> 
    var address = "$row['address_1'], $row['town'], $row['postcode'], UK";  

        var map = new google.maps.Map(document.getElementById('map'), { 
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            zoom: 6
        });

        var geocoder = new google.maps.Geocoder();

        geocoder.geocode({
            'address': address
            }, 
        function(results, status) {
            if(status == google.maps.GeocoderStatus.OK) {
                new google.maps.Marker({
                position: results[0].geometry.location,
                map: map
                });
                map.setCenter(results[0].geometry.location);
            }
        });
</script>

Answer 1

如果我正确理解了问题，您需要在页面上创建地图的多个实例。

您必须为在脚本标记中指定为回调的initMap() JavaScript 函数生成代码。 该函数将创建地图的多个实例，为此，我们可以引入$counter变量以确保我们确实有不同的实例。 此外，我从脚本标签中删除了一个 signed_in 参数，因为它最近被弃用了。

代码片段如下：

 <script src="https://maps.google.com/maps/api/js?key=[KEY-HERE]&callback=initMap" async defer></script>

    <?php
         $counter = 0;
         $jsInitFunction = "function initMap() { var geocoder = new google.maps.Geocoder(); ";
         while ($row = mysql_fetch_assoc($query)) {
            echo "<div class='result-container'>

              <div class='result-wrap'>

                  <div class='leftbox'>

                      <div class='titlebox'>
                          <h2>" . $row['company_name'] . "</h2>
                      </div>

                      <div class='box'>
                          " . ((empty($row['address_1'])) ? '' : "<strong> Address: </strong>" . $row['address_1']) . ((empty($row['address_2'])) ? '' : ",&nbsp" . $row['address_2']) . ((empty($row['town'])) ? '' : ",&nbsp" . $row['town']) . ((empty($row['county'])) ? '' : ",&nbsp" . $row['county']) . ((empty($row['postcode'])) ? '' : ",&nbsp" . $row['postcode']) . "
                      </div>

                      <div class='box'>
                          " . ((empty($row['tel'])) ? '' : "<strong> Telephone: </strong>" . $row['tel']) . ((empty($row['mobile'])) ? '' : "<strong> Mobile: </strong>" . $row['mobile']) . "
                      </div>

                  </div>

                  <div class='rightbox'>

                          <div class='service-pic'>
                           <img src='img/buddy.png' class='hvr-bob'>
                          </div>

                      <div id='map" . $counter . "' style='width: 250px; height: 250px;'></div>

                  </div>

                  </div><br/>";

              $jsInitFunction .= "var address" . $counter . " = '" . $row['address_1'] . "," . $row['town'] . "," . $row['postcode'] .", UK';

                                 var map" . $counter . " = new google.maps.Map(document.getElementById('map" . $counter .  "'), {
                                      mapTypeId: google.maps.MapTypeId.TERRAIN,
                                      zoom: 6
                                 });

                                 geocoder.geocode({
                                    'address': address" . $counter . "
                                 }, function(results, status) {
                                      if(status == google.maps.GeocoderStatus.OK) {
                                          new google.maps.Marker({
                                              position: results[0].geometry.location,
                                              map: map" . $counter . "
                                          });
                                          map" . $counter .  ".setCenter(results[0].geometry.location);
                                    }
                                });";

              $counter++;
          }
          $jsInitFunction .= "}";
    ?>

    <script>
      <?php print $jsInitFunction; ?>
    </script>