谷歌地图v3的PHP javascript关闭问题

时间:2011-06-12 00:39:02

标签: php javascript jquery google-maps-api-3

我的应用程序在从MySQL数据库读取的地图上绘制了一堆标记,我想在每个infowindows中显示一些内容。我的问题是infowindows只会显示我数据库中最后一个条目的内容。下面是我的代码,我只是尝试显示位置的名称。我已经尝试提醒变量,看看它们是否确实显示了正确的内容。我意识到这是一个javascript闭包问题,但我不知道如何解决这个问题。

var startLat;
var startLng;
var locationName;

<?php foreach($workstations as $workstation):?>
    startLat = "<?php echo $workstation['lat']?>";
    startLng = "<?php echo $workstation['lng']?>";
    locationName = "<?php echo $workstation['name']?>";

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(startLat, startLng),
        map: map,
        icon: "images/purple.png"
    });

    //load all the infowindow content
    var contentString = [
                    '<div id="InfoText" style="margin: 0px; padding: 0px; overflow: hidden; border:0px">',
                    '<div class="tabs"><ul><li><a href="#tab1">General</a></li>',
                    '<li><a href="#tab2">General 2</a></li></ul>',
                    '<div id="tab1">',
                    '<b>' + locationName + '</b> - ' + locationName + '<BR>',
                    '<input id="save" type="submit" value="Reserve Today" onclick="saveStation(addMarker)" />',
                    '</div>',
                    '<div id="tab2">',
                    '</div>',
                    '</div>'
                           ].join('');

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

    new google.maps.event.addListener(marker, 'click', (function(marker) {
        return function(){
            infowindow.open(map, marker);
            }
        })(marker));
<?php endforeach;?>

2 个答案:

答案 0 :(得分:3)

是。这是一个js封闭问题。你有一个变量“marker”,所有的map事件监听器都指向它。试试这个:

将它放在顶部(在foreach循环之前):

function addMarkerListener( mark, mp, win )
{
    new google.maps.event.addListener(
          mark, 
          'click', 
          function(){win.open(mp,mark)}
}

然后,代替代码块末尾的监听器添加:

addMarkerListener( marker, map, infowindow );

基本上,你的版本中发生的事情是js说,“好吧,我要创建一个函数并让标记变量填充它。得到它。”当实际调用该函数的时候,它说,“我正在寻找变量'marker',那个变量中有什么?”不幸的是,这已经被重新分配,现在它代表最近的任务。

另一方面,这里的版本告诉JavaScript,“我有这些全新的变量,它们只存在于此处,因此不要在其他地方查找它们。当其中一个被点击时,则显示相关值它。“当点击该项时,JS说,“嗯......这个变量只被分配用于这个上下文,所以我想我会用它。”

我可以进入变量绑定,并且涉及一些令人兴奋的Lambda微积分,但这对于这个范围来说有点多。

答案 1 :(得分:2)

你不应该在PHP中进行循环。您不仅以这种方式输出大量重复的Javascript块,而且还生产这个:

var infowindow = …
var infowindow = …
var infowindow = …
var infowindow = …

你正在覆盖自己的infowindow变量,所以显然只有最后一个变量。

只需在PHP中准备数据,然后使用Javascript循环来处理它。这也应该使范围问题更加明显。在您的情况下,infowindow变量有一个,可以修复如下:

var workstations = <?php echo json_encode($workstations); ?>;

for (var i = 0; i < workstation.length; i++) {
    var lat = workstations[i].lat;
    var lng = workstations[i].lng;
    var name = workstations[i].name;

    var marker = …
    var content = …
    var infowindow = … 

    (function (marker, infowindow) {
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    })(marker, infowindow);
}