Javascript 如何在google maps marker信息窗口中为标记数组添加数组键数据项？

我正在构建一个js函数来初始化一个google地图，并将一个标记数组添加到一个地图中，其中包含从数组中为标记设置的各个位置

标记添加得很好，位置也很好，但我正在努力获取数据数组的某个部分，并将该数组中的每一条信息添加到每个标记弹出窗口中

下面是我正在使用的代码

基本上，我单击标记，它会打开弹出窗口，但它只显示数组中的最后一个数据项

JS:

initMap:function（）{
//让我们在这里检测移动地图
函数detectBrowser（）{
var useragent=navigator.useragent；
var mapdiv=document.getElementById（“映射画布”）；
if（useragent.indexOf（'iPhone'）！=-1 | | useragent.indexOf（'Android'）！=-1）{
mapdiv.style.width='100%'；
mapdiv.style.height='100%'；
}否则{
mapdiv.style.width='100%'；
mapdiv.style.height='700px'；
}
}
//请在这里休息
var城市={
“格罗宁根”：[名字1'，53.216723950863425,6.5602111181640625,7]，
“旧金山”：[名字2'，34.01131647557699，-118.25599389648437,5]，
“纽约市”：[名字3'，40.7143528，-74.0059731,3]
};
var标记=[]；
var迭代器=0；
检测浏览器（）；
var mapCenter=new google.maps.LatLng（51.5254559，-0.0777409）；
var mapOptions={zoom:10，scrollwheel:false，center:mapCenter，mapTypeId:google.maps.mapTypeId.ROADMAP}；
var map=new google.maps.map（document.getElementById（'map_canvas'），mapOptions）；
var图像处理http://shiftms2:8888/wp-content/themes/shiftms/images/mobile/mobile_logo.png'；
功能设置标记（地图、城市）{
对于（城市中的var键）{
console.log（城市[key][0]）；
var数据=城市[关键]；
var marker=new google.maps.marker({
职位：new google.maps.LatLng（数据[1]，数据[2]），
地图：地图，
图标：图像，
zIndex:数据[3]
});
var infoBubble=新的infoBubble({
内容：“+cities[key][0]+'
'+cities[key][0]+'
'，
boxClass:“信息框”，
是的，
pixelOffset:new google.maps.Size（-150，-40），
最大宽度：370，
填充：0，
closeBoxMargin:'0px'，
边框颜色：'#ffffff'，
边界半径：“0”，
最小宽度：535，
disableAutoPan:错，
hideCloseButton:false，
backgroundClassName:'假'
});
google.maps.event.addListener（标记'click'，函数（）{
打开（地图，这个）；
});   
}
}
设置标记（地图、城市）；
}

---

这方面的任何帮助都将是巨大的，我认为它不远了

所有的听众都指的是创建的最后一个infoBubble，在本例中是纽约市，您必须创建infoBubble

onclick

，然后在退出时销毁，或者在退出时重新填充

onclick

并隐藏

更新1 例如

Javascript:

for (var key in cities) {
    var city = cities[key];
    city.marker = new google.maps.Marker({
        position: new google.maps.LatLng(data[1], data[2]),
        map: map,
        icon: image,
        zIndex: city[3]

    });

    ....

    google.maps.event.addListener(marker, 'click', function (event) {
        showInfoBubble(city);
    });.....
}


// somewhere else 
function showInfoBubble(city) {
    var infoBubble = new InfoBubble({
        content: '<div class="bubble"><div alt="' + city[0] + '" class="left-col2 text"><h4>' + city[0] + '</h4><p class="size">' + city[0] + '</p></div></div>',
        boxClass: 'info-box',
        alignBottom: true,
        pixelOffset: new google.maps.Size(-150, -40),
        maxWidth: 370,
        padding: 0,
        closeBoxMargin: '0px',
        borderColor: '#ffffff',
        borderRadius: '0',
        minWidth: 535,
        disableAutoPan: false,
        hideCloseButton: false,
        backgroundClassName: 'phoney'
    });

    // Now open the infoBubble at the marker
    infoBubble.open(map, city.marker);
}

for（城市中的变量键）{
var city=城市[关键]；
city.marker=新的google.maps.marker({
位置：新的google.maps.LatLng（数据[1]，数据[2]），
地图：地图，
图标：图像，
zIndex:city[3]
});
....
google.maps.event.addListener（标记，'click'，函数（事件）{
showInfoBubble（城市）；
});.....
}
//其他地方
功能展示信息泡泡（城市）{
var infoBubble=新的infoBubble({
内容：'+city[0]+'
'+city[0]+'
'，
boxClass:“信息框”，
是的，
pixelOffset:new google.maps.Size（-150，-40），
最大宽度：370，
填充：0，
closeBoxMargin:'0px'，
边框颜色：'#ffffff'，
边界半径：“0”，
最小宽度：535，
disableAutoPan:错，
hideCloseButton:false，
backgroundClassName:'假'
});
//现在在标记处打开infoBubble
infoBubble.open（地图、城市、标记）；
}

那么这应该是在你认为的for循环之外创建的吗？干杯，罗伯会看一看的now@Mdunbavan大家好，请看一下使用jQuery的fiddle。每个都解决了使用

for

循环时遇到的范围问题

for (var key in cities) {
    var city = cities[key];
    city.marker = new google.maps.Marker({
        position: new google.maps.LatLng(data[1], data[2]),
        map: map,
        icon: image,
        zIndex: city[3]

    });

    ....

    google.maps.event.addListener(marker, 'click', function (event) {
        showInfoBubble(city);
    });.....
}


// somewhere else 
function showInfoBubble(city) {
    var infoBubble = new InfoBubble({
        content: '<div class="bubble"><div alt="' + city[0] + '" class="left-col2 text"><h4>' + city[0] + '</h4><p class="size">' + city[0] + '</p></div></div>',
        boxClass: 'info-box',
        alignBottom: true,
        pixelOffset: new google.maps.Size(-150, -40),
        maxWidth: 370,
        padding: 0,
        closeBoxMargin: '0px',
        borderColor: '#ffffff',
        borderRadius: '0',
        minWidth: 535,
        disableAutoPan: false,
        hideCloseButton: false,
        backgroundClassName: 'phoney'
    });

    // Now open the infoBubble at the marker
    infoBubble.open(map, city.marker);
}