谷歌地圖列表

我需要創建一個php頁面，顯示數組中包含的每個地址的Google地圖。我寫的代碼是錯誤的，我看到的是一列灰色地圖，除了最後一張地圖，它包含很多標記。相反，我想要的是一個地圖列表，每個地圖都有一個標記。使用php從數據庫中獲取地址數組，然後使用函數json_encode將該數組傳遞給JavaScript。谷歌地圖列表

我希望這個圖片可以幫助您更好地瞭解我想要什麼，我得到我的代碼，而不是enter link description here

代碼HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

    <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 

      <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> 
      <link rel="stylesheet" type="text/css" href="../public/css/style.css"/> 
      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 

      <script type='text/javascript'> 
      var addresses = <?php echo json_encode($addresses); ?>; 
      </script>  
      <script type="text/javascript" src="../public/js/maps.js"></script> 

     </head> 
     <body> 
        <!-- mappe Google --> 
        <div id="content_map-canvas">   
        </div>    
     </body> 
    </html>

編寫JavaScript代碼：

function initialize() { 
     var count = -1; //Is used to number the div (one per address) 
     var descriptions = new Array(); //Array of descriptions 

     //I copy the contents of the addresses array in the descriptions array 
     for(var i=0; i<addresses.length; i++) { 
      var address = addresses[i]; 
      var description = addresses[i]; 

      var geoc = "geocoder" + i; 
      eval("var " + geoc);  

      var map = "map" + i; 
      eval("var " + map); 

      geoc = new google.maps.Geocoder(); 
      var options = { 
       zoom: 15, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

      count = count + 1; 

      var id = "map-canvas" + count; 
      var div = document.createElement("div"); 
      div.id = id; 
      div.style.width= "300px"; 
      div.style.height= "300px"; 

      var content_map_canvas = document.getElementById("content_map-canvas"); 

      content_map_canvas.appendChild(div); 

      map = new google.maps.Map(document.getElementById(id), options); 

      geoc.geocode({'address': address}, function(results, status) { 
      if(status === google.maps.GeocoderStatus.OK) { 
       map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker 
         ({map: map, 
         position: results[0].geometry.location, 
         title: description 
         }); 
       marker.setAnimation(google.maps.Animation.DROP); 

       contentString = description; 
       var infowindow = new google.maps.InfoWindow({ 
        content: contentString 
       }); 

       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map, marker); 
       }); 
      } 
      else { 
       alert("Geocode failed: " + status + ", " + address); 
      } 
      });  
     } 
    } 
    google.maps.event.addDomListener(window, 'load', initialize);

在哪裏我錯了嗎？謝謝

來源

2014-02-06 user3207923

關閉問題。所有標記都設置爲for循環的最後一個映射，並且只有列表中的最後一個映射才能正確定義。你必須附上你的geocode部分：

... 
(function(address, map) { 
    geoc.geocode({'address': address}, function(results, status) { 
     console.log(address + ', status: ' + status); 
     if (status === google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker 
       ({map: map, 
       position: results[0].geometry.location, 
       title: description 
      }); 
      marker.setAnimation(google.maps.Animation.DROP); 

      contentString = description; 
      var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map, marker); 
      }); 
     } 
     else { 
      alert("Geocode failed: " + status + ", " + address); 
     } 
    });  
})(address, map) 
...

來源

2014-02-06 18:59:22

完美，它的作品！非常感謝你！ :) – user3207923

谷歌地圖列表

回答

相關問題