两个 $.getJSON 调用一个 Google 地图 api 信息 window。范围问题

Question

我正在尝试调用 $.getJSON 两次，并在一个信息中使用来自两次的数据 window。这是一个混搭，用于在 Google 地图 API 信息window 中显示来自 Google 新闻的文章以及 "fortune"（来自 RSS 提要）。我将点击事件侦听器和信息 window 块放在 $.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 种方法可以完成此操作。

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

选项 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);
        });
    });
});

两个 $.getJSON 调用一个 Google 地图 api 信息 window。范围问题

Two $.getJSON calls for one Google Maps api info window. Scope issue

javascript

google-maps-api-3

getjson

infowindow