谷歌地图仅使用 PHP 和 JavaScript 显示 MySQL 数据库中的最后一个标记答案

【问题标题】：Google maps only shows last marker from a MySQL database using PHP and JavaScript谷歌地图仅使用 PHP 和 JavaScript 显示 MySQL 数据库中的最后一个标记
【发布时间】：2016-09-07 05:38:31
【问题描述】：

当我尝试从数据库信息中显示多个标记时，地图仅显示与其 infoWindow 返回的最后一个标记。

我阅读了其他关于闭包的帖子，但我无法解决我的问题。

这是原始代码：

  <body>
    <?php
      include("conexion.php");
      $tipo = $_POST['type'];
    ?>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Map</h1>
          <div id="map" style="width:100%;height:360px;"></div><br><br>
          <?php
            $con = mysqli_connect($host, $user, $pass, $db_name) or die("Error");
            $query = "select * from table where type_name='".$type."'";
            $result = mysqli_query($con,$query);
            $i=1;
            while ($data = mysqli_fetch_assoc($result)) {
          ?>
            <script type="text/javascript">
              var cat = new google.maps.LatLng(41.652393,1.691895);
              var mapOptions = {
                  center: cat,
                  zoom: 8,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
              map = new google.maps.Map(document.getElementById('map'), mapOptions);

              var marker<?php echo $i;?> = new google.maps.Marker({
                    position: new google.maps.LatLng(<?php echo $data['lat']; ?>, <?php echo $data['lng']; ?>),
                    map: map,
                    title: <?php echo "'".$data['name']."'"; ?>
              });

              var infowindow<?php echo $i;?> = new google.maps.InfoWindow({
                  content: "<h1><?php echo "".$data['name'].""; ?></h1><p><b>Addres</b><br> <?php echo "".$data['addres'].""; ?></p><p><b>Description</b><br><?php echo "".$data['description'].""; ?></p>"
              });

              google.maps.event.addListener(marker<?php echo $i;?>, 'click', function() {
                  infowindow<?php echo $i;?>.open(map,marker<?php echo $i;?>);
              });
            </script>

            <?php
                  $i++;
                }
              mysqli_close($con);
            ?>
        </div>
      </div>
    </div>
  </body>

呜呜

【问题讨论】：

标签： javascript php google-maps google-maps-api-3 closures

【解决方案1】：

只需将所有标记放在一个数组上，在 js 中也执行 while，您正在为每次交互创建 map var，或者使用 ajax 在 js 上创建元素，这将大大提高性能。

也看看这个 Google Maps JS API v3 - Simple Multiple Marker Example

【讨论】：