谷歌地图API。多个标记[重复]答案

【问题标题】：Google maps api. Multiple markers [duplicate]谷歌地图API。多个标记[重复]
【发布时间】：2017-02-21 15:05:19
【问题描述】：

var cityMap = new google.maps.Map(document.getElementById('cityMap'), {
   zoom: 12,
});
var infowindow = new google.maps.InfoWindow();
var services = document.getElementsByClassName('s__item');
var marker;
var geocoderCity = new google.maps.Geocoder();

for ( i=0; i < services.length; i++ ) {
    var address = $(services[i]).find('.s__item__address_at').text();
    var contentString = address;

    geocoderCity.geocode({'address': address}, function (results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
        center = results[0].geometry.location;
        cityMap.setCenter(results[0].geometry.location);

        marker = new google.maps.Marker({
            map: cityMap,
            position: center,                   
        });

        google.maps.event.addListener(marker, 'click', (function(marker) {
            return function() {
               infowindow.setContent(contentString);
               infowindow.open(cityMap, marker);
            }
        })(marker));
    }
});
}

在s__item__address_at 块中有一个地址。我使用地理编码器获取位置。然后我尝试在地图上添加信息窗口，但我只得到迭代的最后结果。我该如何解决？

jsfiddle

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

您可以使用 clousure 使 var 实例对侦听器可用

  function markerListener(aMap, aMarker, aContent){
            google.maps.event.addListener(marker, 'click', (function(marker) {
              return function() {
                 infowindow.setContent(aContent);
                 infowindow.open(aMap, aMarker);
              }
          });
  }

  var cityMap = new google.maps.Map(document.getElementById('cityMap'), {
     zoom: 12,
  });
  var infowindow = new google.maps.InfoWindow();
  var services = document.getElementsByClassName('s__item');
  var marker;
  var geocoderCity = new google.maps.Geocoder();



  for ( i=0; i < services.length; i++ ) {
      var address = $(services[i]).find('.s__item__address_at').text();
      var contentString = address;

      geocoderCity.geocode({'address': address}, function (results, status) {
      if (status === google.maps.GeocoderStatus.OK) {
          center = results[0].geometry.location;
          cityMap.setCenter(results[0].geometry.location);

          marker = new google.maps.Marker({
              map: cityMap,
              position: center,                   
          });

          markerListener(cityMap, marker, contentString)
      }
  });

}

【讨论】：