如何将从 API 中提取的信息添加到 Google 地图信息窗口？

Question

我正在使用电影节 API。此 api 适用于电影 id，并根据该 id 提供 json 数据。在该数据中有电影名称、电影 url、电影长度等。我所做的是我在每个国家标记下写下了所有 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 循环中运行 before 代码。此外，每次设置信息窗口内容的调用看起来都会覆盖之前的内容。这意味着即使你修复了这个问题，你也只会看到最后一次 ajax 调用的结果。

现在假设您有 3 个标记，每个标记的 customInfo 数组有 5 条信息。那是十五 (15!) 个单独的 ajax 请求。好多啊。我已经使用 数千 个标记完成了谷歌地图应用程序。

我强烈建议您只创建一个信息窗口并执行更多类似的操作：

//@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 中（附加侦听器的部分无需更改）。