Добавление функции .click к массиву изображений

Question

Привет, у меня есть следующий код. Я хочу обновить маркер Карт Google, указав местоположение, указанное на изображении, на которое вы нажали. В настоящее время у меня есть массив изображений, создаваемых внутри цикла 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 внутри обработчика события клика. Вы можете вставить долготу и широту в атрибуты данных изображения и получить их при вызове обработчика события щелчка. см. ниже код

    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);