$(document).on("click", "#searchRankingLocation", function() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 37.402040,
lng: 127.107296
}, //usepace
zoom: 7
});
for (var i = 0; i < locationList.length; i++) {
markers[i] = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: locationList[i],
title: rankingInfoList[i].name
});
infoList[i] = 'this area will changed.'
windowNames[i] = new google.maps.InfoWindow({
content: infoList[i]
});
google.maps.event.addListener(markers[i], 'click', function() {
windowNames[i].open(map, markers[i]);
});
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
这是我的来源。
我无法向你展示窗户，我试图找到很多解决方案，但他们没有帮助我！
答案 0 :(得分：0)
在原始代码中，var i实际上使i变量的范围在循环之外，因此当click事件发生时，我将locationList.length - 显然{{1}将是未定义的
克服这种情况的3种方法
使用函数（我在此代码中称之为windowNames[i]）
doInfo在这种情况下，函数接收当前标记/ windowName，因此$(document).on("click", "#searchRankingLocation", function() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 37.402040,
lng: 127.107296
}, //usepace
zoom: 7
});
function doInfo(marker, windowName) {
google.maps.event.addListener(marker, 'click', function() {
windowName.open(map, marker);
});
}
for (var i = 0; i < locationList.length; i++) {
markers[i] = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: locationList[i],
title: rankingInfoList[i].name
});
infoList[i] = 'this area will changed.'
windowNames[i] = new google.maps.InfoWindow({
content: infoList[i]
});
doInfo(markers[i], windowNames[i]);
}
});
的值现在无关紧要
使用IIFE（立即调用函数表达式）
i这与第一种情况非常相似，只是函数是＆＃34; inline＆＃34;因此可以被一些人认为更具可读性 - $(document).on("click", "#searchRankingLocation", function() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 37.402040,
lng: 127.107296
}, //usepace
zoom: 7
});
for (var i = 0; i < locationList.length; i++) {
markers[i] = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: locationList[i],
title: rankingInfoList[i].name
});
infoList[i] = 'this area will changed.'
windowNames[i] = new google.maps.InfoWindow({
content: infoList[i]
});
(function(x) { // the IIFE
google.maps.event.addListener(markers[x], 'click', function() {
windowNames[x].open(map, markers[x]);
});
})(i); //pass in the current value of i, used as x in the body of the IIFE
}
});
是＆＃34;捕获＆＃34;每次迭代的x值 - 或者你也可以
i所以，你可以看到这与第一个答案几乎相同
使用ES2015 (function(marker, windowName) { // the IIFE
google.maps.event.addListener(marker, 'click', function() {
windowName.open(map, marker);
});
})(markers[i], windowNames[i]);
- 这只能在现代浏览器中使用（不进行转换）（所以，请忘记Internet Explorer）
let $(document).on("click", "#searchRankingLocation", function() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 37.402040,
lng: 127.107296
}, //usepace
zoom: 7
});
for (let i = 0; i < locationList.length; i++) {
markers[i] = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: locationList[i],
title: rankingInfoList[i].name
});
infoList[i] = 'this area will changed.'
windowNames[i] = new google.maps.InfoWindow({
content: infoList[i]
});
google.maps.event.addListener(markers[i], 'click', function() {
windowNames[i].open(map, markers[i]);
});
}
});
表示循环的每次迭代，let i的值都是＆＃34;捕获＆＃34;对于那次迭代
i因此，您可以看到所有方法在最终结果中都是相同的