将 .click 函数添加到图像数组

Question

嗨，我有以下代码。我想使用点击图像给出的位置更新我的谷歌地图标记。目前，我在 for 循环中创建了一个图像数组。当用户点击图像时，我希望 restMarker 使用新的经度和纬度进行更新。然后，在循环外部更新标记位置。我似乎无法让下面的代码工作。

var restMarker = {
lat: 0, //Just set to a trivial value 
lng: 0
};
let imagesZom = $("#zomato");
for (i = 0; i < passArrayI.length; i++) {
imagesZom.append(
$("<a>").attr("href", passArrayW[i])
.attr("target", "_blank")
.append("<img id = img" + i + " " + "src =" + passArrayI[i] + "</img>")
.click(function() {
restMarker = {
lat: parseFloat(passArrayLat[i]),
lng: parseFloat(passArrayLong[i])
};
})
)
}
setTimeout(function() {
marker.setPosition(restMarker);
map.setCenter(marker.getPosition());
}, 100)

当我运行以下代码时，它可以工作，但是当我尝试将其放入上面的 for 循环中时，我无法让它工作。

var restMarker = {
lat: parseFloat(passArrayLat[0]),
lng: parseFloat(passArrayLong[0])
};
setTimeout(function() {
marker.setPosition(restMarker);
map.setCenter(marker.getPosition());
}, 100)

Answer 1

在循环中，您将覆盖单击事件处理程序中的相同restMarker变量。 您可以在图像的数据属性中推送经度和纬度，并在调用 Click 事件处理程序时检索它。请参阅下面的代码

var restMarker = {
lat: 0, //Just set to a trivial value 
lng: 0
};
let imagesZom = $("#zomato");
for (i = 0; i < passArrayI.length; i++) {
imagesZom.append(
$("<a>").attr("href", passArrayW[i])
.attr("target", "_blank")
.append("<img class='mapImage' id ='img" + i + "' src ='" + passArrayI[i] 
+ "' data-lat='" + passArrayLat[i] 
+ "'  data-long='" + passArrayLong[i] + "'> </img>");
);
}
// write separeate click handler for all images
$(document).on('click','.mapIamge',function() {
var latVal = $(this).data('lat');
var lngVal = $(this).data('long');
restMarker = {
lat: parseFloat(latVal),
lng: parseFloat(lngVal)
};
});
setTimeout(function() {
marker.setPosition(restMarker);
map.setCenter(marker.getPosition());
}, 100);