如何动态更改 foreach 循环内每个元素的输入值？

Question

我想在 foreach 循环内更改每个地图元素的坐标值。例如，对于第一个地图元素，我想分配坐标 [0] 等等。

function initMap() {    
var coordinates = [
        {
            "lat": 123,
            "lng": 123
        },
        {
            "lat": 123,
            "lng": 123
        },
        {
            "lat": 123,
            "lng": 123
        }
  ]
var mapElements = document.querySelectorAll('.map');
mapElements.forEach((element) => {
        const uluru = { lat:coordinates[0].lat, lng:coordinates[0].lng};// how do I dynamically change values here
        console.log(uluru);
        const map = new google.maps.Map(element, {  
            zoom: 4,
            center: uluru,
        });
  const marker = new google.maps.Marker({
        position: uluru,
        map: map,
    });
});
}

Answer 1

考虑这个例子。

function initMap() {
  var coordinates = [{
      "lat": 123,
      "lng": 123
    },
    {
      "lat": 123,
      "lng": 123
    },
    {
      "lat": 123,
      "lng": 123
    }
  ]
  var mapElements = document.querySelectorAll('.map');
  mapElements.forEach((element, index) => {
    const uluru = {
      lat: coordinates[index].lat,
      lng: coordinates[index].lng
    };
    console.log(uluru);
    const map = new google.maps.Map(element, {
      zoom: 4,
      center: uluru,
    });
    const marker = new google.maps.Marker({
      position: uluru,
      map: map,
    });
  });
}

这利用了index。查看更多：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

您也可以自己创建一个索引变量。

function initMap() {
  var coordinates = [{
      "lat": 123,
      "lng": 123
    },
    {
      "lat": 123,
      "lng": 123
    },
    {
      "lat": 123,
      "lng": 123
    }
  ]
  var mapElements = document.querySelectorAll('.map');
  var i = 0;
  mapElements.forEach((element, index) => {
    const uluru = {
      lat: coordinates[i].lat,
      lng: coordinates[i].lng
    };
    i++;
    console.log(uluru);
    const map = new google.maps.Map(element, {
      zoom: 4,
      center: uluru,
    });
    const marker = new google.maps.Marker({
      position: uluru,
      map: map,
    });
  });
}

这两个都有注意事项，因为 forEach 循环可能比您的数组包含更多元素。

如何动态更改 foreach 循环内每个元素的输入值？

how to dynamically change the input values for each element inside foreach loop?

javascript

arrays

foreach

jquery

google-maps