从数据库填充 Google 地图信息窗口答案

【问题标题】：Populate Google Maps infowindow from a database从数据库填充 Google 地图信息窗口
【发布时间】：2014-11-08 09:57:00
【问题描述】：

我在从数据库中填充 Google 地图信息窗口时遇到问题。我的概念如下：一个填充了诸如经度和纬度之类的标记信息的数据库，以及另一个填充了相应信息的表。我已经设法用标记填充地图，但是用正确的信息填充信息窗口是我已经挣扎了 2 天的事情。

我使用的代码如下：

<html>
    <head>
<?php
        $con = mysqli_connect("localhost","root","","unwdmi");
        $result = mysqli_query($con,"SELECT stationNummer ,longitude, latitude FROM stations");

        $i = 0;

        $array = array();
        $array2 = array();
        $array3 = array();

        while ($heg = mysqli_fetch_array($result)){
            $array[$i] = $heg['longitude'];
            $array1[$i] = $heg['latitude'];
            $array2[$i] = $heg['stationNummer'];

            $i++;
        }
        $i = 0;
?>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
  src=
"http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-          FxYoVTVq6Is6lD98&sensor=false">
</script>
<script type="text/javascript">
var infos = [];
var locations = [ <?php
    foreach($array as $value) {
        $longitude = $value;
        $latitude = $array1[$i];
        $stationNummer = $array2[$i];


        $test = "'loan', $latitude, $longitude, 'address $i'"; ?> [ <?php echo $test; ?> ], <?php
        $i++;
    } ?>
];

$.ajax({
    url: 'ajax.php', //This is the current doc
    type: "POST",
    dataType: 'json', // add json datatype to get json
    data: ({
        stationNummer: 10015
    }),
    success: function(data) {
        console.log(data);
    }
});

function initialize() {

    var myOptions = {
        center: new google.maps.LatLng(33.890542, 151.274856),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    setMarkers(map, locations)

}


function setMarkers(map, locations) {

    var marker, i

    for (i = 0; i < locations.length; i++) {

        var loan = locations[i][0]
        var lat = locations[i][1]
        var long = locations[i][2]
        var add = locations[i][3]

        jQuery.ajax({
            url: 'ajax.php', //This is the current doc
            type: "POST",
            dataType: 'json', // add json datatype to get json
            data: ({
                loan
            }),
            success: function(data) {
                console.log(data);
            }
        });

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({
            map: map,
            title: loan,
            position: latlngset
        });
        map.setCenter(marker.getPosition())



        var content = data;

        var infowindow = new google.maps.InfoWindow()


        google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
            return function() {

                /* close the previous info-window */
                closeInfos();

                infowindow.setContent(content);
                infowindow.open(map, marker);

                /* keep the handle, in order to close it on next click event */
                infos[0] = infowindow;

            };
        })(marker, content, infowindow));

    }
}

function closeInfos() {

    if (infos.length > 0) {

        /* detach the info-window from the marker ... undocumented in the API docs */
        infos[0].set("marker", null);

        /* and close it */
        infos[0].close();

        /* blank the array */
        infos.length = 0;
    }
}
  </script>
 </head>
 <body onload="initialize()">
  <div id="default" style="width:100%; height:100%"></div>
 </body>
  </html>

  </script>
 </head>
 <body onload="initialize()">
  <div id="default" style="width:100%; height:100%"></div>
 </body>
  </html>

我要引用的 PHP 文件是这样的：

<?php
  $userAnswer = $_POST['loan']; 
  $con = mysqli_connect("localhost","root","","unwdmi");
  $result = mysqli_query($con,"SELECT temp, prcp, wdsp, cldc FROM measurement WHERE stationNummer =".$userAnswer."");
  while ($heg1 = mysqli_fetch_array($result)){
     $temp = $heg1['temp'];
     $prcp = $heg1['prcp'];
     $wdsp = $heg1['wdsp'];
     $cldc = $heg1['cldc'];
     }
   $text = "<table border='4'>
                    <tr>
                        <th>Temperatuur</th>
                        <th>Neerslag</th>
                        <th>Windsnelheid</th>
                        <th>Bewolkingsgraad</th>
                    </tr>
                    <tr>
                        <td>".$temp."</td>
                        <td>".$prcp."</td>
                        <td>".$wdsp."</td>
                        <td>".$cldc."</td>
                    </tr>";
  echo json_encode($text);  
?>

希望有人能帮我解决这个问题。

【问题讨论】：

您需要在这里彻底重新考虑您的方法。您的所有数据都有 3 个 PHP 数组，无用的命名为 $array、$array1 和 $array2，用于存储经度、纬度和站号。取而代之的是一个包含所有这些数据位的数组，例如$stations[$i] = [ 'latitude' => $heg['latitude'], 'longitude' => $heg['longitude'], 'stationNummer' => $heg['stationNummer'] ]; 然后，当您开始尝试将其转换为 JS 时，这可能会使生活稍微轻松一些。

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

【解决方案1】：

我没有进行任何测试，但我很确定你不能在你的 javascript 中使用。

恕我直言，最好的方法是在 php 中创建 javascript 变量（而不是 php 变量，参见 $longitude，...），然后从您的 JS 代码中调用它们。

<script type="text/javascript">
    <?php 
        ...
        foreach($array as $value) {
            "var longitude = " . $value;
            ....
        } ?>
</script>

在这之后你应该可以在你的 js 中使用经度了。

如果我还不够清楚，请告诉我。

【讨论】：