如何设置变量名"i"javascript中的In for循环

How to set variable name with "i" in for loop in javascript?

本文关键字：quot 中的 javascript In for 循环 何设置 设置 变量名      更新时间：2023-09-26

结果是一些带有纬度&经度

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声明不能做)，您的事件将触发每次最后一个值

相关文章：