Question

我在从数据库填充Google Maps infowindows时遇到问题。我所拥有的概念如下：一个数据库充满了标记信息，如经度和纬度，另一个表填充了相应的信息。我已经设法用标记填充地图，但是填写信息正确的信息是我已经困扰了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);  
?>

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

Answer 1

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

Imho最好的方法是在php中创建javascript变量（而不是php，cf. $ longitude，...）然后从你的JS代码中调用它们。

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

在此之后你应该能够在你的js中使用经度。

告诉我，我是否还不够清楚。

从数据库填充Google Maps infowindow

1 个答案: