Настройка infoWindow для списка маркеров, созданных внутри функции обратного вызова (directionsService)

Question

Я пытаюсь установить infoWindows для маркеров, которые создаются в функции обратного вызова службы DirectionsService (Google Maps API V3).Я безуспешно пытался сделать это разными способами.

Вот скелет того, как выглядит мой код:

for(i=0;i<markersList.length;i++){
map = someMap
var request = myRequestObject;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);

directionsService.route(request, (function (address) {
  return function(response, status) {
    //Use the directions service to do some stuff
    //..Then create markers
     var marker = new google.maps.Marker({
                       map: map,
                       title: address['title']
                   });
    //push the marker to a list of markers attached to the map
    //this can be useful to delete all markers in a later step
    map.markers.push(marker);

    //Creating multiple instances of infoWindows works fine though..
    //However, Creating 1 info window for the whole map doesn't work from here
    //If I try that, I'd set the same content for all info windows
    //which is not what I want.
  }
 }
)(markersList[i])
);

}

Я пытался сделать это, но и это не помогло:

//add setInfo as a custom function to my map
//then call it to iterate over all markers and add info windows
google.maps.Map.prototype.setInfo = function() {

   for(var i=0; i < this.markers.length; i++){
        infowindow.setContent(this.markers[i].getTitle());
        google.maps.event.addListener(this.markers[i], 'click', function(){
            infowindow.close();
            infowindow.open(map,this.markers[i]);
            });
    }
};

Затем я вызову эту функцию после того, как я закончу с directionsService.route (проверьте первый блок кода), вне моего основного цикла for.Однако по какой-то причине он никогда не находит никаких маркеров, прикрепленных к карте.

Есть мысли о том, как назначить нужные информационные окна для маркеров карты?Я хочу иметь 1 экземпляр infoWindow, чтобы можно было закрыть его при нажатии нового окна infoWindow (infoWindow.close ()).

Спасибо!

Answer 1

Вот как я это делаю в функции обратного вызова геокодера (немного отличается от directionService, но все еще использую функцию обратного вызова, поэтому методология должна быть такой же), используя только одно информационное окно. Я бы использовал это в цикле при геокодировании группы адресов.

var infowindow = new google.maps.InfoWindow();

geocoder.geocode( { 'address': value}, function(results, status) {

  if (status == google.maps.GeocoderStatus.OK) {

        //create and add marker to map based off geocode result
        var marker = new google.maps.Marker({  
            map: map,
            title: results[0].formatted_address,
            position: results[0].geometry.location
        });

        //add marker to array so we can clear it later
        markersArray.push(marker); 

        //create listener for marker infowindow and set content
        google.maps.event.addListener(marker, 'click', function() { 
            infowindow.close();
            infowindow.setContent(results[0].formatted_address);
            infowindow.open(map,marker);
        });
    }
});

Answer 2

Один из способов сделать это - использовать внешнюю функцию, которая устанавливает содержимое в информационном окне, и когда вы добавляете свои маркеры, вы вызываете эту функцию вместо того, чтобы прослушиватель событий объявлялся встроенным в вашем цикле. Проблема в том, что после создания всех маркеров, когда вы щелкаете по одному, он просто использует любое значение результирующего значения [0] .formatted_address, то есть то, каким оно было в последний раз установлено в конце цикла.

var marker = new google.maps.Marker({
    map: map,
    title: address['title']
});
//push the marker to a list of markers attached to the map
//this can be useful to delete all markers in a later step
map.markers.push(marker);

// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, address['title']);

И эта функция просто:

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
    });
} 

PS: Вам не нужно вызывать infowindow.close () до вызова infowindow.open (). Поскольку есть только одно информационное окно, API автоматически закроет его, прежде чем снова открыть в новом месте.