Question

嗨，我有以下代码。我想用点击图片中指定的位置更新我的Google Maps Marker。目前，我在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);

向图像数组添加.click函数

1 个答案: