多个谷歌地图与PHP循环

时间:2011-06-14 14:12:48

标签: api google-maps

我试图用PHP循环显示多个地图,但我不能让它在这里工作是剥离的代码......

    <!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAA5iXFaQoABBiRl7JNx5HFuxSa5RD4FXABRIVtLveK1-E6gmai7BR1Y63hhzwAO9ZPoNDgLDBQ_Z6B4Q" type="text/javascript"></script>


  </head>
  <body onload="load()" onunload="GUnload()">


    <?php

    if($_POST['select'] == "place"){

    $posts = $facebook->api("/search?q=".urlencode($_POST['search'])."&type=".urlencode($_POST['select'])."&center=".urlencode($_POST['center'])."&distance=".urlencode($_POST['distance'])."");

    //print_r($posts);
    $num = "1";
    $num2 = "1";
    foreach($posts as $v) {

        foreach($v as $v2) { ?> 

        <div>
        <script type="text/javascript">

    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map-<?php echo $num++; ?>"));
        map.setCenter(new GLatLng(<?php echo $v2['location']['latitude']; ?>, <?php echo $v2['location']['longitude']; ?>), 13);
      }
    }
    //]]>
         <div id="map-<?php echo $num2++; ?>" style="width: 500px; height: 300px"></div>
        <p><?php echo $v2['location']['latitude']; ?></p>
        <p><?php echo $v2['location']['longitude']; ?></p>
        </div>
        <?php

        }

    }


    }

    }

    ?>



  </body>
</html>

我试图将javascript放在循环中,但这不起作用。

目前有没有人有任何建议它只会显示循环中的最后一张地图???

由于

1 个答案:

答案 0 :(得分:2)

我可以告诉你为什么它不起作用。您每次循环时都重新定义相同的load()函数。因此,当文档加载并调用load()时,它只显示最后一个映射。顺便说一句,你也应该使用谷歌地图V3 api而不是V2,但这是一个不同的主题。

这样的事情应该解决这个问题。首先,把它放在&lt; head&gt;中。部分:

<script type="text/javascript">
var loaders = [];
function load() {
    for (var i = 1; i < loaders.length; i++) {
        loaders[i]();
    }
}
</script>

然后将你的循环改为:

foreach($posts as $v) {

    foreach($v as $v2) { ?> 

    <div>
    <script type="text/javascript">

//<![CDATA[

loaders[<?php echo $num; ?>] = function() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map-<?php echo $num++; ?>"));
    map.setCenter(new GLatLng(<?php echo $v2['location']['latitude']; ?>, <?php echo $v2['location']['longitude']; ?>), 13);
  }
};
//]]>
     <div id="map-<?php echo $num2++; ?>" style="width: 500px; height: 300px"></div>
    <p><?php echo $v2['location']['latitude']; ?></p>
    <p><?php echo $v2['location']['longitude']; ?></p>
    </div>
    <?php

    }

}