为在回调函数 (directionsService) 中创建的标记列表设置 infoWindow

Question

我正在尝试为在方向服务（Google Maps API V3）的回调函数中创建的标记设置 infoWindows。我尝试了许多不同的方法来做到这一点，但没有任何运气..

这是我的代码的骨架：

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

然后，在我的主 for 循环之外，我将在执行完方向服务.route（检查第一个代码块）后调用此函数。但是，由于某种原因，它永远不会找到任何附加到地图上的标记..

关于如何将正确的 infoWindows 分配给地图标记有任何想法吗？ 我想要 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

一种方法是使用一个外部函数来设置信息窗口上的内容，并且在添加标记时调用该函数，而不是在循环中内联声明事件侦听器。问题是，在创建所有标记之后，当您单击一个标记时，它只会使用 results[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.open() 之前调用 infowindow.close()。由于只有一个信息窗口，API 会自动关闭它，然后在新位置重新打开它。