Question

我正在尝试为在DirectionsService（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]);
            });
    }
};

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

有关如何将正确的infoWindows分配给地图标记的任何想法？我希望有一个infoWindow实例，以便在单击一个新的infoWindow时关闭它（infoWindow.close（））。

谢谢！

Answer 1

以下是我在地理编码器回调函数中的做法（与directionService略有不同，但仍然使用回调函数，因此方法应该相同）只使用一个infowindow。在对一堆地址进行地理编码时，我会在循环中使用它。

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

执行此操作的一种方法是使用外部函数设置infowindow上的内容，并在添加标记时调用该函数，而不是在循环中内联声明事件侦听器。问题是，在创建所有标记后，当您单击一个标记时，它将只使用结果[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（）。由于只有一个infowindow，API会自动关闭它，然后在新位置重新打开它。

设置infoWindow以获取在回调函数内创建的标记列表（directionsService）

2 个答案: