如何将从API中提取的信息添加到Google Map infowindow？

Question

我正在使用电影节api。这个api适用于电影ID，它根据id提供json数据。在那个数据中有电影名称，电影网址，电影长度等。我所做的是我在每个国家标记下写了所有的ID，因为我想显示哪部电影来自哪个国家。现在我只能看到信息窗口中的ID，而不是我想要的数据（filmName和filmUrl）。你知道如何以某种方式将它们结合起来吗？

每个标记应打开包含该标记数据的信息窗口。 infowindows数量=标记数量

有人知道如何帮忙吗？ 提前谢谢。

var ourMarkers =[marker1, marker2, marker3];

for (var x = 0; x < ourMarkers.length; x++)
{
    var ourMarker = ourMarkers[x];
    for (var i=0;i<ourMarker.customInfo.length;i++){        
         $.ajax({
            url: "http://blabla"+ourMarker.customInfo[i]+"/format/json/API-Key/YQ8UtQp5fCQIDAknJLVXZLWvAcsWjpa86XPml3eH",
            dataType: "json",
            header: {'X-API-KEY': 'blabla'},
            success: function(result) {
                console.log(result.filmName_en, result.filmInfoURL);
            },
            done:function(result){
            //console.log(result);
            }
        }); 
    }   
    var contentString = '<div id="content">'+ ourMarker.customInfo+'</div>';
    bindInfoWindow(ourMarker, map, infoWindow, contentString);
}

Answer 1

除了将其登录到控制台之外，您在代码中没有对您在ajax调用中收到的信息做任何事情。它不会神奇地出现在您的标记对象中。

您似乎还不清楚ajax的异步部分，代码的var contentString = ...部分实际上之前运行 for中的代码}循环。此外，每次调用设置infowindow的内容看起来都会覆盖之前的内容。这意味着，即使您解决了这个问题，您也只会看到最后一次ajax调用的结果。

现在可以说你有3个标记，每个标记的customInfo数组有5条信息。这是十五（15！）个单独的ajax请求。好多啊。我已经使用数千个标记完成了谷歌地图应用程序。

我强烈建议你只创建一个infowindow并做更多这样的事情：

//@param filmID {Number}
//@param location {google.maps.LatLng}
function openInfoWindow(filmID, location) {

    //$.getJSON is a better choice here than $.ajax
    $.getJSON({
        url: apiURL,
        data: filmID,
        success: function(res) {

            //assumes a global infowindow variable and that your
            //google.maps.Map is called googlemap
            infowindow.setPosition(location); 
            infowindow.setContent(res.filmName_en + res.filmInfoURL);
            infowindow.open(googlemap);
        }
    });
}

ourMarkers.forEach(function(marker) {
    google.maps.event.addListener(marker, 'click', function(e) {

        //in google maps event listeners, 'this' refers to the marker
        openInfoWindow(this.filmID, this.position);
    });
});

现在，只有当用户点击标记时，才会触发ajax请求。如果你想缓存ajax请求的结果（例如，你知道你从中获取数据的API总是为相同的id返回相同的结果），你可以稍微修改它：

//@param filmID {Number}
//@param location {google.maps.LatLng}
var openInfoWindow = (function() {
    var cache = {};        

    return function(filmID, location) {
        if (cache[filmID]) {
            infowindow.setPosition(location); 
            infowindow.setContent(cache[filmID]);
            infowindow.open(googlemap);
        } else {
            $.getJSON({
                url: apiURL,
                data: filmID,
                success: function(res) {
                    var content = res.filmName_en + res.filmInfoURL;
                    cache[filmID] = content;
                    infowindow.setPosition(location); 
                    infowindow.setContent(content);
                    infowindow.open(googlemap);
                }
            });
        }
    }
})();

现在代码使用IIFE并将缓存存储在closure中（在附加侦听器的部分中无需更改）。