javascript - 在谷歌地图标记中显示 JSON 数据

Question

我想在我的谷歌地图中显示几个标记。每个标记都有一个弹出窗口，其中包含一些信息。我通过数据库获取信息。但我没有在弹出窗口中收到信息:

<div id="map-canvas"></div>

JavaScript/jQuery:

var info = "";
$(function() {
    $.getJSON("http://server:8080/getInfo", function(data) {
        $.each(data, function(i, f) {
            info = "<tr>" + "<td> Info: " + f.address + " / " + f.date + "</td>" + "</tr>";
            $(info).appendTo("#info");
        });
    });
});

var contentString2 = 
    '<div id="content">'+
        '<h2>Barcelona</h2>'+
        '<div>' +info+ '</div>'+
        '<p><a href="#contact" data-role="button" data-mini="true">Contact</a></a> '+
        '</p>'+
    '</div>';               


// marker
var parkingList = [
    ['Spain', contentString1, 41.469326, 1.489334, 1],
    ['Barcelona', contentString2, 41.353812, 2.157440, 2]
],...

现在，我有问题:

1. 如何将 json 中的数据插入到 contentString 中？
2. 如何创建一个包含 json 数据并且可以在整个 JavaScript 中使用而不仅仅是在 getJSON 函数中使用的变量？

Answer 1

1) 您可以在调用函数之前声明一个变量来提取 json 并在脚本中的任何位置使用它。请注意，只有调用 getJson 后才会为其赋值。

2)我已经展示了如何将数据从 json 插入到 contentString 中的示例。

var alldata,contentString = "";
$(function() {
    $.getJSON("http://server:8080/getInfo", function(data) {
        alldata = data; //stores json
        $.each(data, function(i, f) {
            contentString += "<tr>" + "<td> Info: " + f.address + " / " + f.date + "</td>" + "</tr>";
            $(contentString).appendTo("#info");
        });
    });
});