javascript - 多个标记与div背景通信失败

Question

我正在尝试在 Google map 中的一些标记与 map 外的一些 div 之间进行通信。如果我将鼠标悬停在 map 中的标记上，我想在单独的 Div 中更改背景颜色。如果我只有一个标记，它工作正常，但如果我有五个，就像示例中那样，将只显示列表中的最后一个。

这是为什么呢？怎么了？有人可以帮助我吗？

function initialize() {
  var locations = [
    ['E021066', 39.521753693611515, 2.480292320251465, 4],
    ['E033012', 39.52724876810637, 2.48166561126709, 5],
    ['E023016', 39.50193802307746, 2.4660873413085938, 3],
    ['E019512', 39.522349566080855, 2.4886178970336914, 2],
    ['E032023', 39.510927787044295, 2.4994325637817383, 1]
  ];
  var latlng = new google.maps.LatLng(39.5075442, 2.476614799999993);
  var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  var image1 = 'images/marker1.png';
  var image2 = 'images/marker2.png';
  for (i = 0; i < locations.length; i++) {
    **var id = locations[i][0];**
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: image1
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        marker.setImage("images/marker.png");
      }
    })(marker, i));
    google.maps.event.addListener(marker, 'mouseover', function() {
      this.setIcon(image2);
      **id.style.backgroundColor='#ccc';**
    });
    google.maps.event.addListener(marker, 'mouseout', function() {
      this.setIcon(image1);
      **id.style.backgroundColor='#fff';**
    });
  }
}

Answer 1

这是一个常见问题。 marker 是一个全局变量，当循环结束时，它仍然指向最后创建的那个。我建议使用函数闭包(一个 createMarker 函数)将鼠标悬停/移出和单击监听器关联到标记。像这样的东西:

function createMarker(location)
{
  var id = location[0];
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(location[1], location[2]),
    map: map,
    icon: image1
  });
  google.maps.event.addListener(marker, 'click', function() {
      marker.setImage("images/marker.png");
  });
  google.maps.event.addListener(marker, 'mouseover', function() {
    this.setIcon(image2);
    id.style.backgroundColor='#ccc';
  });
  google.maps.event.addListener(marker, 'mouseout', function() {
    this.setIcon(image1);
    id.style.backgroundColor='#fff';
  });
}

然后你的循环变成:

for (i = 0; i < locations.length; i++) {
  createMarker(locations[i]);
} 

我不希望它在 IE 中正常工作。

Working Example