2014-11-08 4 views
0

У меня возникла проблема с заполнением инфо-окон Google Maps из базы данных. Концепция, которую я имею, такова: база данных, заполненная информацией о маркерах, такой как долгота и широта, и другая таблица, заполненная соответствующей информацией. Мне удалось заполнить карту маркерами, однако заполнение информационного наполнения правильной информацией - это то, с чем я борюсь уже 2 дня.Заполнение данных в Google Картах из базы данных

код я использую следующий:

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

Я надеюсь, что кто-то может помочь мне с этой проблемой.

+0

Вам нужно полностью пересмотреть свой подход здесь. У вас есть 3 массива PHP для всех ваших данных, бесполезно названных $ array, $ array1 и $ array2, для долготы, широт и номеров станций. Вместо этого есть один массив, который содержит все эти биты данных, например '$ station [$ i] = [ \t 'широта' => $ heg ['широта'], \t 'longitude' => $ heg ['longitude' ], \t 'stationNummer' => $ heg ['stationNummer'] ]; 'И тогда это может немного облегчить жизнь, когда вы начнете пытаться преобразовать это в JS, с одной стороны. – duncan

ответ

0

Я не делал никаких тестов, но я уверен, что вы не можете использовать их в своем javascript.

Imho лучшим способом было бы создать переменные javascript (вместо php, cf. $ longitude, ...) в php, а затем вызвать их из вашего JS-кода.

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

После этого вы должны использовать долготу в своих js.

Сообщите мне, если я не буду достаточно ясным.

+0

Спасибо! это сработало и устранило проблему! – viewtYy

Смежные вопросы