如何通過while循環插入谷歌地圖？

我想插入谷歌地圖在div（html）通過while循環生成。 Google地圖從數據庫中獲取座標。如何通過while循環插入谷歌地圖？

因爲我需要使用谷歌地圖API密鑰，我用下面的代碼。

但是，它僅顯示在使用最後一次座標數據庫的第一個div，地圖，，並沒有顯示出任何其他的div任何其他地圖。

<?php $connection = mysqli_connect('localhost', 'root', '', 'users'); function currentUsers($connection){ $sql = "SELECT * FROM user "; $result = mysqli_query($connection, $sql); if(mysqli_num_rows($result) > 0){ while($row = mysqli_fetch_assoc($result)) { $userID = $row['id']; $firstName = $row['firstname']; $country = $row['country']; $latitude = $row['latitude']; $longitude = $row['longitude']; echo '<div> <div align = "left"> <h3>'. $userID. " ". $firstName. " ". $country. '</h3> </div> <div id = "map" align = "right"> <script>  function initMap() { var x = '. $latitude. '; var y = '. $longitude. '; var myLatLng = {lat: x, lng: y}; var map = new google.maps.Map(document.getElementById(\'map\'), { center: myLatLng, scrollwheel: true, zoom: 4 }); var marker = new google.maps.Marker({ map: map, position: myLatLng, title: \'Hello World!\' }); } </script> <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> </div> </div>'; } }else{ echo "Currently there are no users!"; } mysqli_close($connection); } currentUsers($connection); ?> <html> <head><title></title> <style> #map {width: 500px; height: 400px; } </style>  </head> <body></body> </html>

來源

2016-02-29 AnushkaM

每個div的ID應該是唯一的。試試這個

<?php 
     $connection = mysqli_connect('localhost', 'root', '', 'users'); 


     function currentUsers($connection){ 
      $sql = "SELECT * FROM user "; 
      $result = mysqli_query($connection, $sql); 
      $x= 0; 
      if(mysqli_num_rows($result) > 0){ 
       while($row = mysqli_fetch_assoc($result)) { 
        $userID = $row['id']; 
        $firstName = $row['firstname']; 
        $country = $row['country']; 
        $latitude = $row['latitude']; 
        $longitude = $row['longitude']; 

        echo '<div> 
           <div align = "left"> 
            <h3>'. $userID. " ". $firstName. " ". $country. '</h3> 
           </div> 

           <div id = "map_'.$x.'" align = "right"> 
            <script> <!--Google map api--> 
             function initMap() { 
             var x = '. $latitude. '; 
             var y = '. $longitude. '; 
             var myLatLng = {lat: x, lng: y}; 

             var map = new google.maps.Map(document.getElementById("map_'.$x.'"), { 
              center: myLatLng, 
              scrollwheel: true, 
              zoom: 4 
             }); 

             var marker = new google.maps.Marker({ 
              map: map, 
              position: myLatLng, 
              title: \'Hello World!\' 
             }); 
             } 
            </script> 
            <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> 
           </div> 
          </div>'; 
          $x++; 
       } 

      }else{ 
       echo "Currently there are no users!"; 
      } 

      mysqli_close($connection); 
     } 

     currentUsers($connection); 


    ?> 

    <html> 
    <head><title></title> 
      <style> #map {width: 500px; height: 400px; } </style> <!--Size of the map--> 
    </head> 
    <body></body> 
    </html>

來源

2016-02-29 13:35:40

謝謝你的迴應。但它不起作用。現在，它不加載任何地圖。看來，API不允許加載多個地圖。 – AnushkaM

只能可靠地包括API一次。目前，您正在爲每個添加的地圖添加API。
您也可以只有一個名稱爲initMap的函數，目前您包含該函數的多個版本。
您只能擁有一個ID爲「地圖」的div，目前您每個地點都有一個div。

相關的問題（僅JavaScript，PHP沒有）：Adding multiple map canvases to window - Google Maps Javascript API v3

來源

2016-02-29 13:47:13 geocodezip

這是100％的工作對我來說我已經測試此代碼

<?php 
$arr=''; 
$connection = mysqli_connect('localhost', 'root', '', 'users'); 


    function currentUsers($connection){ 
     $sql = "SELECT * FROM user"; 
     $result = mysqli_query($connection, $sql); 
     $x= 0; 
     if(mysqli_num_rows($result) > 0){ 
      while($row = mysqli_fetch_assoc($result)) { 
       $userID = $row['id']; 
       $firstName = $row['firstname']; 
       $country = $row['country']; 
       $arr[] = array($row['latitude'],$row['longitude'],$x); 
       echo '<div style="width:100%;"> 
          <div style="width:250px; height: 150px; float :left;"> 
           <h3>'. $userID. ". ". $firstName. " ". $country. '</h3> 
          </div> 
          <div id = "map_'.$x.'" style="width:250px;height: 150px;"> </div> 
         </div>'; 
         $x++; 
      } 
     echo '<script> var mymaps ='.json_encode($arr).'</script>'; 

     }else{ 
      echo "Currently there are no users!"; 
     } 

     mysqli_close($connection); 
    } 
    currentUsers($connection); 
?> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script> 

<script> 
var maps = []; 

function initialize(id, myLatLng) { 
    geocoder = new google.maps.Geocoder(); 
    var mapOptions = { 
     zoom: 9, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    maps[id] = new google.maps.Map(document.getElementById('map_'+id), 
     mapOptions); 

    var marker = new google.maps.Marker({ 
     map: maps[id], 
     position: myLatLng, 
     title: 'Hello World!' 
    }); 
} 

$(document).ready(function(){ 
    for(var i = 0; i < mymaps.length; i++) 
    { 
     var x = parseFloat(mymaps[i][0]); 
     var y = parseFloat(mymaps[i][1]); 
     var myLatLng = {lat: x, lng: y}; 
     google.maps.event.addDomListener(window, 'load', initialize(mymaps[i][2],myLatLng)); // two calls 
    } 

}); 
</script>

來源

2016-03-01 09:46:21

如何通過while循環插入谷歌地圖？

回答

相關問題