如何将从API获取的信息添加到谷歌地图信息窗口

How to add a info pulled from an API to a Google Map infowindow?

本文关键字：信息 添加 信息窗 窗口 谷歌地图 API 获取      更新时间：2023-09-26

我正在使用一个电影节api。这个api与电影id一起工作，它根据该id提供json数据。在这些数据中有电影名称、电影url、电影长度等。我所做的是在每个国家标记下写下所有id，因为我想显示哪部电影来自哪个国家。现在我只能在信息窗口中看到id，而不能看到我想要的数据（filmName和filmUrl）。你知道如何把它们结合起来吗？

每个标记都应该打开一个信息窗口，其中包含该标记的数据。信息窗口数=标记数

有人知道怎么帮忙吗？提前谢谢。

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

在代码中，除了将ajax调用中返回的信息记录到控制台之外，您从未对这些信息做过任何操作。它不会神奇地出现在标记对象中。

您似乎还不清楚ajax的异步部分，代码的var contentString = ...部分实际上在for循环中的代码之前运行。此外，每次设置信息窗口内容的调用看起来都会覆盖上一次。这意味着，即使您修复了这个问题，您也只能看到最后一次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并将缓存存储在闭包中（侦听器所连接的部分无需更改）。

相关文章：