两个 $.getJSON 调用一个 Google Maps api 信息窗口。范围问题

Question

我试图调用 $.getJSON 两次，并在一个信息窗口中使用这两个数据。这是一个混搭，用于在 Google Maps API 信息窗口中显示来自 Google 新闻的文章以及“财富”（来自 RSS 提要）。我将单击事件侦听器和信息窗口块放在 $.getJSON("articles.php") 调用中，因此下面的代码可以显示文章，但我无法确定要显示的正确结构财富，因为它在一个单独的 $.getJSON 中，有它自己的范围。有没有办法让这个工作？

function addMarker(place)
{

    var image = 'http://maps.google.com/mapfiles/kml/pal2/icon31.png';  
    var myLatlng = new google.maps.LatLng(parseFloat(place.latitude), parseFloat(place.longitude));
    //make markers and push to array. 
    var marker = new MarkerWithLabel({
    position: myLatlng,
    map: map,
    icon: image,
    labelClass: "labels",
    labelContent: place.place_name,
    labelAnchor: new google.maps.Point(20,0),    
    });

    markers.push(marker);

    // getJSON fortune from RSS feed. 
    var fortune = []; 
    $.getJSON("fortunes.php").done(function(data, textStatus, jqXHR) {
        var content = data;
        var len = data.length;
        if (content.length < 1)
        {
            var fortune = "test";
        }
        else
        {
            fortune = content;
        }

    });     
    // getJSON articles from Google News rss feed. 
    var query = place.postal_code;
    var articles = "News service currently unavailable.";
    var parameter = { "geo": query };
    $.getJSON("articles.php", parameter).done(function(data, textStatus, jqXHR) {
        var content = data;
        var len = data.length;
        if (content.length < 1)
        {
            articles = "Slow news day."
        }
        else
        {
            articles = "<ul>";
            // put articles in unordered list
            for (var i = 0; i < len; i++) {
                articles += "<div><li> <a href=\"" + data[i].link + "\" target=\"_blank\">" + data[i].title + "</li></div>";
            }
            articles += "</ul><div><p>FORTUNE</p><p>" + fortune.length + "</p></div>";
        }
        // Listener for info window    
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });
        // Info window 
        var infowindow = new google.maps.InfoWindow({
            content: articles
        });  
    }); 

}

Answer 1

有 4 种方法可以完成这项工作。

1. 按顺序进行 AJAX 调用 - 请参阅下面的代码示例或 http://jsfiddle.net/xs0oypmd/
2. 在用户打开标记窗口内容时构建它，因此将文章 html 构建代码移动到标记单击事件侦听器中，并在 infoWindow 上使用 setContent 函数。如果采用这种方法，我建议使用标志来指示第一次打开信息窗口，以便文章 html 只构建一次。这种方法确实有一个限制，你仍然不知道财富是否已经加载。
3. 从“articles.php”中调用“fortunes” - 这假定对 php 脚本的所有权。这种方法意味着来自浏览器的一次 AJAX 调用。
4. 使用模型绑定框架，例如淘汰赛，通过json调用更新数据时更新infoWindow内容

选项 1 的代码示例

$("#btnGetArticles").on("click", function(){
    var fortunes = "test";

    $.ajax({
        url: "/echo/json/",
        type: 'post',
        dataType: 'json',
        data: {
            json: '"some fortune"'
        }
    }).done(function(data) {
        fortunes = data;

        $.ajax({
            url: "/echo/json/",
            type: 'post',
            dataType: 'json',
            data: {
                json: '[{"link": "link/to/first/article", "title" : "first article"},{"link": "link/to/second/article", "title" : "second article"},{"link": "link/to/third/article", "title" : "third article"}]'
            }
        }).done(function(articles) {
            var articlesList = $("<ul />");
            $.each(articles, function(i, v) {
                articlesList.append($("<li />").html(v.title + ' ' + fortunes.length));
            });

            $("#output").append(articlesList);
        });
    });
});