Javascript 谷歌用多个唯一的信息框映射多个标记

我目前正在从事的一个项目需要实现一个带有多个标记和多个信息框的谷歌地图。参考map API这似乎是一个很好的起点：

所以我用这段代码作为基础，并以此为基础构建。现在，我坚持的一点是为每个标记添加一个独特的信息框。这是我的消息来源

正如您所看到的，我试图调用数组中的第一个元素，该元素选择了其中的任何对象，这非常适合lat、long和title，而不是contentstring变量

for (var i = 0; i < locations.length; i++) {

    var office = locations[i];
    var myLatLng = new google.maps.LatLng(office[1], office[2]); //works here
    var infowindow = new google.maps.InfoWindow({content: contentString});

    var contentString = 
        '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">'+ office[0] + '</h1>'+ //doesnt work here
        '<div id="bodyContent">'+ 
        '</div>'+
        '</div>';

    var infowindow = new google.maps.InfoWindow({content: contentString});

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: globalPin,
        title: office[0], //works here
    });

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

for（变量i=0；i

要了解我试图解释的内容，只需单击上面演示中的每个标记，您就会看到标题为“中国”的信息框弹出窗口。出于某种原因，它会为每个标记捕获最后一个对象的第一个元素

我试图实现的是，所有的信息框都是唯一的，如果这有意义的话？因此，当我点击新加坡的一个标记时，会弹出一个信息框，标题为Singapore，使用我之前定义的数组对象

谢谢，我希望我已经说得够清楚了

---

---

问题是变量

infoWindow

在循环的每次迭代中都会被覆盖。通常这不会是一个问题，除了

addListener

中的部分是一个异步回调，并且在调用每个回调时，对

infoWindow

的引用不再正确

您可以通过为

infoWindow

创建一个闭包来解决这个问题，这样每个回调函数都有自己的副本。使用以下命令：

google.maps.event.addListener(marker, 'click', getInfoCallback(map, contentString));

使用封闭的辅助函数：

function getInfoCallback(map, content) {
    var infowindow = new google.maps.InfoWindow({content: content});
    return function() {
            infowindow.setContent(content); 
            infowindow.open(map, this);
        };
}

---

这正是我想要的，非常感谢！