使用PHP和javascript从数据库插入标记和信息窗口（Google地图）

Question

我的目标是从数据库中的表中获取数据并将其显示在地图上。 我的表有三列：LATITUD（存储纬度）（类型=浮点（10,6）），LONGITUD（存储经度）（类型=浮点10,6）和ASUNTO（存储信息）（类型= VARCHAR）。 前两个具有标记位置的信息，而第三列存储与标记有关的信息。 最后一列的内容是我要在信息窗口中显示的内容。

为了实现此功能，我决定在页面的body元素中插入一个脚本元素（javascript），该脚本元素用于创建地图并加载与之相关的所有信息。

在此javascript代码内部，我包含了PHP代码，该代码负责对数据库进行查询以获取在关联数组的开头提到的表的内容。 在这段代码中，我想通过while循环将所有标记及其相应的信息窗口加载进来。

加载标记并没有给我带来任何问题，要加载它们，我使用了while循环代码。

while ($row = $resultado->fetch( PDO::FETCH_ASSOC )) {
              echo '  var myLatlng1 = new google.maps.LatLng('.
              $row['LATITUD'].', '.$row['LONGITUD'].'); 
              var marker1 = new google.maps.Marker({ 
              position: myLatlng1, 
              map: map, 
              });';
 }

在PHP脚本中，我插入了这段代码，对我来说很好用。 当我想为每个标记添加信息窗口时出现问题，其中包含在开始时提到的“ ASUNTO”列中存储的信息。 当我修改上面显示的代码以添加信息窗口时，我遇到了问题。 给我麻烦的代码是下面的代码。

while ($row = $resultado->fetch( PDO::FETCH_ASSOC )) {
              echo ' var asunto = '. $row['ASUNTO'] . ';';
              echo '  var myLatlng1 = new google.maps.LatLng('.
              $row['LATITUD'].', '.$row['LONGITUD'].'); 
              var marker1 = new google.maps.Marker({ 
              position: myLatlng1, 
              map: map, 
              });



              var infowindow = new google.maps.InfoWindow({
                content: asunto
              });


              infowindow.open(map, marker1);


              ';
        }

我认为给我带来麻烦的代码行是循环中的第一条，我现在将在下面显示。

echo ' var asunto = '. $row['ASUNTO'] . ';';

我之所以这样认为，是因为当我将“ infowindow”变量的内容更改为无法通过PHP获取并直接插入的字符串时，它不会给我带来任何问题，并且在使用“开放”方法。 下面的下一个代码不会给我任何问题。

while ($row = $resultado->fetch( PDO::FETCH_ASSOC )) {

              echo '  var myLatlng1 = new google.maps.LatLng('.
              $row['LATITUD'].', '.$row['LONGITUD'].'); 
              var marker1 = new google.maps.Marker({ 
              position: myLatlng1, 
              map: map, 
              });



              var infowindow = new google.maps.InfoWindow({
                content: "hello"
              });


              infowindow.open(map, marker1);


              ';
        }

如您所见，信息窗口的内容已更改，当我对其进行更改时，它可以正常工作并且可以加载地图。 我想显示信息窗口，该窗口显示存储在数据库中的信息，而不是上面示例的字符串“ hello”。

我想知道为什么我的方法失败以及如何解决该问题，以便能够显示每个标记所需的信息窗口。

Answer 1

问题不在于数据库，也不在于php。 问题是您在哪里回显该数据。

一个简单的例子，很明显，这是行不通的

while ($row = $resultado->fetch( PDO::FETCH_ASSOC )) {
  echo '  var myLatlng1 = new google.maps.LatLng('.
  ...

while循环创建此代码的多个实例。 变量myLatlng1将被简单地覆盖。

您需要做的是将数据与功能分开。

因此，您生成了1个变量。

它应该像这样（我的php有点生锈，我希望我不会产生错误）：

<?php
$data = array();  // we make an empty object/array, we will fill it with the data in the rows
while ($row = $resultado->fetch( PDO::FETCH_ASSOC )) {
  $data[] = array(
    'LATITUD'   => $row['LATITUD'],
    'LONGITUD'  => $row['LONGITUD'],
    'ASUNTO' => $row['ASUNTO'],
  );
}
// now we echo this variable, 1 variable containing all the data
$data_string = json_encode($data);  // this turns php arrays into a javascript-readable object
echo 'var my_data = ' . $data_string .';';  // notice which ; is for javascript and which is for php
?>

var my_data将是这样的（我将在布鲁塞尔插入一些位置）：

var my_data = [{"LATITUD":"50.89496405015655","LONGITUD":"4.341537103056892","ASUNTO":"Atomium"},{"LATITUD":"50.84501941894387","LONGITUD":"4.349947169423087","ASUNTO":"Manneken Pis"},{"LATITUD":"50.83847065124941","LONGITUD":"4.376028969883903","ASUNTO":"European Parliament"}];

---

现在的JavaScript。 您如何使用信息窗口？ 我将使用my_data硬编码，因此您可以复制/粘贴此代码并测试javascript。

不要忘记您的API密钥

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 90%;
  }
</style>
<div id="map"></div>
<script>
  var my_data = [{"LATITUD":"50.89496405015655","LONGITUD":"4.341537103056892","ASUNTO":"Atomium"},{"LATITUD":"50.84501941894387","LONGITUD":"4.349947169423087","ASUNTO":"Manneken Pis"},{"LATITUD":"50.83847065124941","LONGITUD":"4.376028969883903","ASUNTO":"European Parliament"}];

  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 50.869754630095834, lng: 4.353812903165801},
      zoom: 12
    });
    for(var i=0; i<my_data.length; i++) {
      // marker
      var position = {lat: Number(my_data[i].LATITUD), lng: Number(my_data[i].LONGITUD)};
      var marker = new google.maps.Marker({
        position: position,
        title: my_data[i].ASUNTO,
        map: map
      });

      // infowindow
      var infowindow = new google.maps.InfoWindow({
        content: my_data[i].ASUNTO,
        map: map,
        position: position
      });
    }
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>