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

Question

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

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

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

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