如何设置变量名"i"javascript中的In for循环
How to set variable name with "i" in for loop in javascript?
结果是一些带有纬度&经度
for(i=0; i<results.length ; i++ ){
var (marker + i) = new google.maps.Marker({
position: results[i].geometry.location,
map: map
});
var (infowindow + i)= new google.maps.InfoWindow({
content: "test" + i
});
google.maps.event.addListenerOnce(marker, 'click', function() {
(infowindow + i).open(map,marker);
});
}
以上是我的代码,但不能工作。
我正在使用谷歌地图api,并希望为每个标记添加信息窗口。如何设置我的变量名称,这样我就可以有不同的信息窗口时,单击每个标记?
例如,当我点击marker1时,它会显示信息窗口test1,点击marker2,它会显示test2,等等你不能声明像var (marker + i)
这样的变量,但你可以声明一个数组或对象,并使用它们的index/key
来实现你所期望的。
另一个问题是
google.maps.event.addListenerOnce(marker, 'click', function() {
infowindow[i].open(map,marker);
});
i
将全部引用最后一个循环的i
,这将是results.length
,您可以使用IIFE让函数为您存储正确的infowindow[i]
。您可以看看下面的代码片段。
var vals = [];
var btn = document.querySelector('#btn');
var i;
for (i = 0; i < 5; ++i) {
vals[i] = i;
btn.addEventListener('click', function() {
console.log('Directly add event: i is now' + i + ', vals[i] is now' + vals[i]);
});
(function(idx) {
btn.addEventListener('click', function() {
console.log('Use IIFE: i is now' + idx + ', vals[i] is now' + vals[i]);
});
}(i));
}
<button id="btn">click</button>
所以你的代码可以写成
// Declare variables that is about to use in for loop.
var i;
var marker = [];
var infowindow = [];
for(i = 0; i < results.length ; i++) {
marker[i] = new google.maps.Marker({
position: results[i].geometry.location,
map: map
});
infowindow[i] = new google.maps.InfoWindow({
content: "test" + i
});
// This IIFE will do what in the function's body,
// as infowindow[i] is now passed as a param named `infowindow`,
// we can ensure the event's target infowindow will be affect by the for-loop's i.
(function(infowindow) {
google.maps.event.addListenerOnce(marker, 'click', function() {
infowindow.open(map,marker);
});
}(infowindow[i]));
}
声明和使用名为marker
的数组的正确方法,以便您可以使用语法marker[i]
访问第i个元素,如下所示:
var marker = [];
// create other arrays here, the same way as the line above
for(i=0; i<results.length ; i++ ){
marker[i] = new google.maps.Marker({
position: results[i].geometry.location,
map: map
});
// put more code here to add data to the other arrays
}
使用array代替,您可以向标记添加一个自定义参数来捕获您的信息,如下所示:
var markers = [];
var info = [];
for(i=0; i<results.length ; i++ ){
markers.push(new google.maps.Marker({
position: results[i].geometry.location,
map: map,
infoIndex: i,
}));
info.push(new google.maps.InfoWindow({
content: "test" + i,
}));
google.maps.event.addListenerOnce(marker, 'click', function() {
info[marker.infoIndex].open(map,marker);
});
}
与您的prev逻辑(完全分开,var声明不能做),您的事件将触发每次最后一个值
相关文章:
- "锻造;React中的表达式
- 如何提取“;href"最近列表项中的属性值
- 什么是"!函数(){}〃;javascript中的mean/do
- "过渡到“;影响Ember中的页面刷新
- "控制器作为“;$timeout中的语法
- 什么是“;回归"javascript中的mean
- "回声“;Node.js中的图像
- "撤消”;Javascript中的DOM操作函数
- 获取"下一个“;对象中的数值
- "ctrl”;在指令中的LINK中未定义
- 我怎么能读“;.on()"jQuery中的方法参数
- "push()"到Typescript中的数组
- "<<"javascript中的运算符
- 添加前缀“#"到数组中的某些字符串值
- 什么's二“"javascript中的mean
- "键“;jQuery中的对象无法正常工作
- 为什么"这个“;指的是javascript中forEach中的Window
- 匹配“/"如果其后面没有紧接着“0”;(javascript中的“
- HTML元素"中的URL文本.Split不是一个函数
- 更新元素以显示" contentteditable& quot;中的实时变化元素