javascript - 使用 PHP 和 javascript 从数据库插入标记和信息窗口(Google map )

Question

我的目标是从数据库中的表中获取数据并将其显示在 map 上。我的表有三列:LATITUD(存储纬度)(type = float(10,6))，LONGITUD(存储经度)(type = float 10,6)和ASUNTO(存储信息)(type = VARCHAR)。前两列包含标记位置的信息，而第三列存储与标记相关的信息。最后一栏的内容是我想通过信息窗口显示的内容。

为了在页面的主体元素内实现此目的，我决定插入一个脚本元素(javascript)，我用它来创建 map 并加载与其相关的所有信息。

在这段 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);


              ';
        }

正如您所看到的，信息窗口的内容已更改，当我更改它时，它工作正常并且 map 能够加载。我想显示信息窗口，它显示数据库中存储的信息，而不是上面示例中的字符串“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 key

<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>