在表格中將動態內容注入Google Maps的信息窗口

Question

我要讓Google Maps V3中的信息窗口能夠正常工作非常困難。

-場景：-我正在舊金山地鐵系統和Google Maps之間創建一個mashup。 在一種功能中，當用戶選擇路線時，標記（代表站點）被疊加在地圖上。 點擊標記后，會打開一個信息窗口，該窗口將顯示車站名稱，路線名稱（以該路線的顏色為背景）和無邊界表格，其中將包含該特定車站上火車行駛的ETD時間（基本上是“分鍾”，直到火車駛向特定目的地。 顯然，當用戶單擊不同的標記時，該站點的相應數據將反映在信息窗口中。

返回JSON格式ETD數據的服務器端腳本都可以正常工作，並且我可以按需接收數據。

-問題：-我無法正確地將ETD數據“注入”到我的信息窗口中，我想以一種很好的表格格式顯示它，但是由於某種原因，所有ETD數據都沒有被注入到表中，而是在桌子外面溢出。

我真的很感謝任何建議，幫助等。

謝謝，

-Soumya Roy

碼：-

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.

Answer 1

您的JSON提取是異步的，您需要使用回調例程中返回的數據，現在，您的</table></div></div>關閉在回調函數之外（我認為）。

我懷疑您想要的是在單擊單擊偵聽器（單擊標記）時獲取特定信息窗口的數據，而不是預先填充數據，因此請在單擊偵聽器中調用getJSON函數，然后使用以下命令打開信息窗口從服務器返回時的數據（在getJSON回調中）。