Fatal编程技术网
  • php/
  • Php 谷歌地图（api v3）-通过mysql查询结果循环到地理编码，并在地图上放置多个标记

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

php mysql google-maps google-maps-api-3

Php 谷歌地图（api v3）-通过mysql查询结果循环到地理编码，并在地图上放置多个标记,php,mysql,google-maps,google-maps-api-3,Php,Mysql,Google Maps,Google Maps Api 3,我在搜索结果页面上有一个谷歌地图，可以显示多达20个列表。这20个清单来自mysql查询，并在页面上循环。那部分很好用 然而，谷歌地图（也为我对地址进行地理编码）只显示了第一个列表。我不知道如何让它循环遍历每个列表并将它们全部放到地图上 我相信一旦我让它工作起来，一切都会很容易理解，但我就是没有能力让它从头开始工作。谷歌的开发者文档也帮不上什么忙 非常感谢您的帮助 *********问题更新********* 问题是，在修复之前，页面显示了所有列表，但只映射了1。实现了答案后，页面只显示第一个列

我在搜索结果页面上有一个谷歌地图，可以显示多达20个列表。这20个清单来自mysql查询，并在页面上循环。那部分很好用

然而，谷歌地图（也为我对地址进行地理编码）只显示了第一个列表。我不知道如何让它循环遍历每个列表并将它们全部放到地图上

我相信一旦我让它工作起来，一切都会很容易理解，但我就是没有能力让它从头开始工作。谷歌的开发者文档也帮不上什么忙

非常感谢您的帮助

*********问题更新*********

问题是，在修复之前，页面显示了所有列表，但只映射了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>


var地理编码器；
var映射；
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
var latlng=新的google.maps.latlng（34.052234，-118.243685）；
var地址=“”；
变量myOptions={
缩放：14，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}
试验
这里是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>


var地理编码器；
var映射；
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
var latlng=新的google.maps.latlng（34.052234，-118.243685）；
var地址=[]；
地址。push（）；
变量myOptions={
缩放：14，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
（地址中的i）{
var地址=地址[i]；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
}否则{
//警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}
试验
请帮帮我！！我一辈子都想不出如何解决这个问题，但我知道答案一定就在我面前

一如既往地感谢……

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 } ?>

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);
        }
    });