Question

我正在尝试在Google地图中的某些标记与地图之外的几个div之间进行通信。如果我将鼠标悬停在地图中的标记上，我想在单独的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函数）将mouseover / out和click监听器与标记相关联。类似的东西：

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

Answer 2

谢谢你，工作得很好，但只有在我转换了ID字符串之后。

var locations = [
  [E021066, 39.521753693611515, 2.480292320251465, 0]
];

现在我遇到了最后一个问题，当用户将鼠标移到div上时，我还想更改标记图像，不幸的是我不知道我是如何引用标记的。有没有人有任何建议？

<div class="offer_box" id="E021066"><a href="#" onmouseover="createMarker['E021066'].setIcon('marker2.png')" onmouseout="createMarker['E021066'].setIcon('marker1.png')">

多个标记和div背景之间的通信失败

2 个答案: