Google Maps（api v3） - 通过mysql查询结果循环到地理编码并在地图上放置多个标记

我在显示多达20个列表的搜索结果页面上有谷歌地图。这20个列表是从一个mysql查询中拉出来的，并在页面上循环。那部分工作正常。Google Maps（api v3） - 通过mysql查询结果循环到地理编码并在地图上放置多个标记

但是，谷歌地图（也为我地理编码的地址），只显示第一个列表。我不知道如何让它遍历每个列表并将它们全部放在地图上。

我敢肯定，一旦我得到它，它会很容易地遵循和理解，但我只是没有从头开始工作的印章。谷歌的开发人员文档也没有太多的帮助要么....

任何帮助非常感谢！

** * ** * ** * UPDATE质疑* ** * ** *

答案提供我不能看不到工作....问题是，在修复之前，页面显示了所有列表，但只映射了1.实现答案后，页面只显示第一个列表，并且地图完全不显示。

我做了修剪A & B版本。这基本上是在整个页面的代码全贴：

版本1：这显示在页面上的所有目录，但只映射第一上市：

<?php 
mysql_select_db($database_db, $db); 
$query_my_query = "SELECT * FROM biz WHERE state = 'MO' and city = 'springfield' order by name asc limit 0,5 "; 
$my_query = mysql_query($query_my_query, $db) or die(mysql_error()); 
$row_my_query = mysql_fetch_assoc($my_query); 
$totalRows_my_query = mysql_num_rows($my_query); 

$address = $row_my_query['address']; 
$city = $row_my_query['city']; 
$state = $row_my_query['state']; 

?> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var geocoder; 
    var map; 
    function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(34.052234,-118.243685); 
    var address = '<?php echo $address.', '.$city.', '.$state; ?>'; 

    var myOptions = { 
     zoom: 14, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    geocoder.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 
     }); 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 
</script> 
<head> 
<title>TEST</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > 
</head> 
<body onload="initialize()"> 
     <div> 
       <?php do { // horizontal looper?> 
        <?php echo $row_my_query['name'].' '.$row_my_query['address'].' '.$row_my_query['city'].', '.$row_my_query['state']; ?> 
        <?php echo substr($row_my_query['zip'],0,5); ?><br> 
       <?php $row_my_query = mysql_fetch_assoc($my_query); 
       } while ($row_my_query); //end horizontal looper ?> 
      </div> 
     <div id="map_canvas" style="width: 300px; height: 300px;"></div> 
</body> 
</html>

这里是V2：这只结束了显示1页在页面上显示，并且地图根本不起作用：

<?php 
mysql_select_db($database_db, $db); 
$query_my_query = "SELECT * FROM biz WHERE state = 'MO' and city = 'springfield' order by name asc limit 0,5 "; 
$my_query = mysql_query($query_my_query, $db) or die(mysql_error()); 
$row_my_query = mysql_fetch_assoc($my_query); 
$totalRows_my_query = mysql_num_rows($my_query); 

$address = $row_my_query['address']; 
$city = $row_my_query['city']; 
$state = $row_my_query['state']; 

?> 
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var geocoder; 
    var map; 
    function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(34.052234,-118.243685); 

     var addresses = []; 
     <?php while ($row = mysql_fetch_assoc($my_query)) { ?> 
     addresses.push(<?php echo '"' . $row['address'].', '.$row['city'].', '.$row['state'] . '"'; ?>); 
     <?php } ?> 


    var myOptions = { 
     zoom: 14, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
for(i in addresses) { 
    var address = addresses[i]; 
    geocoder.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 
      }); 
     } else { 
      // alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 
</script> 
<head> 
<title>TEST</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > 
</head> 
<body onload="initialize()"> 
     <div> 
       <?php do { // horizontal looper?> 
        <?php echo $row_my_query['name'].' '.$row_my_query['address'].' '.$row_my_query['city'].', '.$row_my_query['state']; ?> 
        <?php echo substr($row_my_query['zip'],0,5); ?><br> 
       <?php $row_my_query = mysql_fetch_assoc($my_query); 
       } while ($row_my_query); //end horizontal looper ?> 
      </div> 
     <div id="map_canvas" style="width: 300px; height: 300px;"></div> 
</body> 
</html>

请帮忙!!我不能为了我的生活想出如何解决这个问题，但我知道答案肯定在我面前。

感谢一如既往....

来源

2012-02-06 Kevin

1）你需要一个PHP循环遍历结果从查询设置，然后生成地址的JavaScript数组。

将行：

var address = '<?php echo $address.', '.$city.', '.$state; ?>';

与...

var addresses = []; 
<?php while ($row = mysql_fetch_assoc($my_query)) { ?> 
addresses.push(<?php echo '"' . $row['address'].', '.$row['city'].', '.$row['state'] . '"'; ?>); 
<?php } ?>

2）总结一个JavaScript循环在你的geocoder.geocode函数调用，遍历你刚才生成的地址阵列。

for(i in addresses) { 
    var address = addresses[i]; 
    geocoder.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 
      }); 
     } else { 
      // alert("Geocode was not successful for the following reason: " + status); 
     } 
    });

希望这是有道理的！

来源

2012-02-06 08:28:57

感谢您的回复。它已经过去了，但我迫不及待地想要在早上尝试。我会让你知道它是怎么回事。 – Kevin 2012-02-06 09:31:23

我试过这个解决方案，但无法让它工作。现在，该页面只显示第一个列表，而不是显示所有列表并仅映射第一个列表，而地图完全不显示。 – Kevin 2012-02-09 07:40:00

Google Maps（api v3） - 通过mysql查询结果循环到地理编码并在地图上放置多个标记

回答

相关问题