從數據庫填充Google Maps infowindow

從數據庫填充Google Maps infowindows時遇到問題。我有的概念如下：一個數據庫充滿了經度和緯度等標記信息，另一個表中充滿了相應的信息。我已經設法用標記填充地圖，但是用正確的信息填充infowindow是我已經使用了2天的東西了。從數據庫填充Google Maps infowindow

我正在使用的代碼如下：

<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文件我正在reffering的是：

<?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); 
?>

我希望有人能夠幫我解決這個問題。

來源

2014-11-08 viewtYy

你需要在這裏完全重新思考你的方法。您的所有數據都有3個PHP數組，無用的命名爲$ array，$ array1和$ array2，用於經度，緯度和站號。取而代之的是一個包含所有這些數據位的數組，例如'$ station [$ i] = [ \t'latitude'=> $ heg ['latitude']， \t'longitude'=> $ heg ['longitude' ]， \t'stationNummer'=> $ heg ['stationNummer'] ];'那麼當你開始嘗試將它轉換爲JS時，這可能會使生活稍微容易一些。 – duncan 2014-11-08 12:59:21

我還沒有做任何測試，但我敢肯定，你不能在你的JavaScript中使用。

Imho最好的方法是在PHP中創建JavaScript變量（而不是PHP的，參考$ longitude，...）然後從你的JS代碼中調用它們。

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

之後，你應該可以在你的js中使用經度。

如果我還不夠清楚，告訴我。

來源

2014-11-08 13:01:52 Moucheg

謝謝！這工作並解決了問題！ – viewtYy 2014-11-10 09:29:52

從數據庫填充Google Maps infowindow

回答

相關問題