Как добавить информацию, извлеченную из API, в информационное окно Google Map?

Question

Я использую кинофестиваль API. Этот API работает с идентификаторами фильмов и предоставляет данные JSON в соответствии с этим идентификатором. в этих данных есть название фильма, URL фильма, длительность фильма и т. д. Я сделал все то, что написал все идентификаторы под каждым маркером страны, так как я хотел бы показать, какой фильм идет из какой страны. Теперь я могу видеть только идентификаторы в информационных окнах, а не данные, которые мне нужны (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);
}

Answer 1

Нигде в коде вы ничего не делаете с информацией, получаемой вами при вызове ajax, кроме записи в консоль. Он волшебным образом не появляется в ваших маркерных объектах.

Вы также, кажется, довольно неясны об асинхронной части AJAX, var contentString = ... часть вашего кода на самом деле выполняется перед кодом в вашем for петля. Кроме того, каждый вызов для установки содержимого информационного окна выглядит так, как будто он перезаписывает предыдущий. Это означает, что даже если вы исправите это, вы увидите только результаты последнего вызова ajax.

Сейчас скажем, у вас есть 3 маркера и каждый маркер customInfo Массив имеет 5 частей информации. Это пятнадцать (15!) Отдельных запросов AJAX. Это много. И я сделал приложения карт Google с тысячами маркеров.

Я настоятельно рекомендую вам создать только одно информационное окно и сделать что-то похожее на это:

//@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, из которого вы извлекаете данные, всегда возвращает одинаковые результаты для одного и того же идентификатора), вы можете слегка изменить его следующим образом:

//@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 и сохраняет кэш в замыкании (ничего не нужно менять в той части, к которой подключены слушатели).