Question

我需要创建一个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);

我哪里错了？感谢

Answer 1

关闭问题。所有标记都设置为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)
...

谷歌地图列表

1 个答案: