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

Question

我想更改foreach循环中每个map元素的坐标值。例如，对于第一个地图元素，我想分配坐标[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,
});
});
}

这就利用了CCD_ 1。查看更多：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循环的元素可能比数组多。