Question

我有一个带有大量标记的谷歌地图，每个都对应于html中的不同帖子。每个标记ID与每个帖子ID相同。在地图内initialize = function() {...我有以下代码（我正在使用gon将信息从rails传递到javascript）：

for (m = 0; m < gon.markers.length; m++) {
  marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(gon.markers[m].lat, gon.markers[m].lng),
    icon: image,
    infowindow: gon.markers[m].infowindow,
    id: gon.markers[m].id
  });
  google.maps.event.addListener(marker, 'mouseover', function() {
    var image = $("#map-canvas").data('marker2');
    this.setIcon(image);
    // console.log("marker.id: " + marker.id);
    // console.log("this.id" + this.id);
    $('#' + marker.id).css('background', 'red');
  });
  google.maps.event.addListener(marker, 'mouseout', function() {
    var image = $("#map-canvas").data('marker1');
    this.setIcon(image);
    $('#' + marker.id).css('background', 'white');
  });
  markers[markers.length] = marker;
}

取消注释console.log行表明它是经典的闭包问题（无论挂在哪个标记上，marker.id总是具有相同的值）。

我的问题是，我如何正确编码，以便按预期进行？我现在无法获得正确的代码。我尝试过这样的东西，但是不起作用：

  marker.on('mouseover', noticeHover(marker.id));
  function noticeHover(id) {
    var image = $("#map-canvas").data('marker2');
    this.setIcon(image);
    $('#' + id).css('background', 'gainsboro');
  }

Answer 1

将处理标记创建的整个代码包装到函数中，并将循环内的项作为参数传递给此函数：

    for (m = 0; m < gon.markers.length; m++) {
      //anonymous,self-executing function 
      (function(props){
        var goo     = google.maps,
            marker  = new goo.Marker({
                        map: map,
                        position: new goo.LatLng(props.lat, 
                                                 props.lng),
                        icon: image,
                        infowindow: props.infowindow,
                        id: props.id
                      });
        goo.event.addListener(marker, 'mouseover', function() {
          var image = $("#map-canvas").data('marker2');
          this.setIcon(image);
          $('#' + marker.id).css('background', 'red');
        });

        goo.event.addListener(marker, 'mouseout', function() {
          var image = $("#map-canvas").data('marker1');
          this.setIcon(image);
          $('#' + marker.id).css('background', 'white');
        });
        markers.push(marker);
       }(
          gon.markers[m]//pass current loop-item as argument 
        ));

     }

试图消除谷歌地图eventListener中的关闭错误

1 个答案: