努力在谷歌地圖內製作多個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>