努力在谷歌地图内制作多个infowindows

Question

我已阅读并通过Google Maps API v3 multiple markers Infowindow和其他类似帖子。

我有多个地图标记从一个数组中生成，我需要放在infowindows中的信息来自另一个数组。我理解它的方式是循环得到我要求的循环完成，而不是每次迭代都得到它。我的两个数组是下面：

for(var i = 0; i < postcodes.length; i++) { 
    var infowindow = new google.maps.InfoWindow({ 
     content: placenames[i] 
    }); 
    geocoder.geocode({ 
     'address': postcodes[i] 
    }, function(results, status) { 
     if(status == 'OK') { 
      var marker = new google.maps.Marker({ 
       map: map, 
       icon: "<?php echo $view->getThemePath();?>/images/map-marker.png", 
       position: results[0].geometry.location 
      }); 
      marker.addListener('click', function() { 
       infowindow.open(map, marker); 
      }); 
     } 
    }); 
} 

我想过会发生的是，每次迭代：

var postcodes = ["postcode1", "postcode2", "postcode3", "postcode4"]; 
var placenames = ["placename1","placename2","placename3","placename4"]; 

的地图生成正常的方式，标记使用的是以下环放置在地图上[i] infowindow和marker会被创建。但实际发生的情况是，每个邮政编码都会在地图上放置4个标记，每个标记在触发点击事件时打开infowindow，但infowindow中的地名始终是最后一个地名。

据我所知，有关闭的问题，我试图将marker.addListener包装在一个函数中，但没有奏效。我试图遍历postcodes循环内的每个地名，并打印出16个地名。

有人可以解释我要出错的地方吗？它不完全是我需要理解的答案，所以我不会重复错误，因为我必须在此地图上展开另一个项目的工作。

Answer 1

在地理编码操作上使用函数关闭来将标记点击监听器函数中的引用保留为i。

概念拨弄的证明]（http://jsfiddle.net/guL9vL0b/1/）

代码片断：

var geocoder = new google.maps.Geocoder(); 
 
var map; 
 
var bounds = new google.maps.LatLngBounds(); 
 
var postcodes = ["CH44 0, UK", "BN41 1", "DL1 3, UK", "E10 5, UK"]; 
 
var placenames = ["placename1", "placename2", "placename3", "placename4"]; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    for (var i = 0; i < postcodes.length; i++) { 
 
    var infowindow = new google.maps.InfoWindow({ 
 
     content: placenames[i] 
 
    }); 
 
    geocoder.geocode({ 
 
     'address': postcodes[i] 
 
    }, (function(i) { // function closure on i 
 
     return function(results, status) { 
 
     if (status == 'OK') { 
 
      var marker = new google.maps.Marker({ 
 
      map: map, 
 
      position: results[0].geometry.location 
 
      }); 
 
      marker.addListener('click', function() { 
 
      infowindow.setContent(placenames[i]) 
 
      infowindow.open(map, marker); 
 
      }); 
 
      bounds.extend(marker.getPosition()); 
 
      map.fitBounds(bounds); 
 
     } 
 
     } 
 
    })(i)); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>