将动态内容注入表格中的Google地图信息窗口

时间:2012-09-26 18:36:14

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

我正在努力让Google Maps V3中的infowindows工作,因为我希望它能够正常工作。

- 场景: - 我正在旧金山的地铁系统和谷歌地图之间创建一个混搭。在一个功能中,当用户选择路线时,将标记(表示台)覆盖在地图上。单击时标记打开一个infoWindow,它将显示Station的名称,Route Name(以Route的颜色为背景)和一个无边界表,该表将具有该特定站上列车运动的ETD时间(基本上,只是“分钟“直到火车前往特定目的地离开”。显然,当用户点击不同的标记时,该工作站的相应数据会反映在信息窗口上。

返回JSON格式ETD数据的服务器端脚本完全正常工作,我正在按照自己的意愿接收数据。

- 问题: - 我无法将ETD数据“正确”“注入”我的信息窗口,我希望以一种漂亮的表格格式显示它,但出于某种原因,所有的ETD数据只是没有注入表中,而是溢出表外。

我真的很感激任何建议,帮助等。

谢谢,

-Soumya Roy

CODE: -

function drawinfo(mark,abbr,name) {
var infowindow=new google.maps.InfoWindow();
var strContent="<div style=\"width:400px;height:240px;\">
        <div style=\"font-weight:bold;padding:0.5em;\"><p>Station:"+name+"</p></div><br/>
        <div style=\"margin-top:0.3em;background-color:"+Clr+";float:left;font-size:0.8em;
        font-weight:bold;\"><p>Route:"+Rt+"</p></div><div style=\"float:right;\">
        <table style=\"border:0;color:#666;\"><tr><td>Departures</td></tr>"; //Until here the infowindow shows properly.

$.getJSON("getetd.php",{abbr:abbr},function(result) {
    $.each(result,function(key,value) {
        $.each(this,function(k,v) {
            strContent+="<tr><td>|"+k+"</td>";  //The actual JSON data is being received properly.
            $.each(this,function(k2,v2) {
                $.each(this,function(k3,v3) {
                    strContent+="<td>"+v3+"</td>";  //Neither "k" nor "v3" get injected.
                });
            });
            strContent+="</tr>";
        });
    });
}); //getJSON() ends

strContent+="</table></div></div>";
google.maps.event.addListener(mark,'click',function(){
    infowindow.close();  // So as to close any other infowindow.
    infowindow.setContent(strContent);
    infowindow.open(map,mark);
}); //addListener() ends.

} //drawinfo() ends.

1 个答案:

答案 0 :(得分:0)

您的JSON提取是异步的,您需要使用回调例程中返回的数据,现在您的结束</table></div></div>在回调函数之外(我认为)。

我怀疑你想要的是在调用点击监听器(点击标记)时获取特定信息窗口的数据,而不是预先填充数据,所以在点击监听器中调用getJSON函数,然后打开从服务器返回数据时的infowindow(在getJSON回调中)。