4

我正在尝试在谷歌地图中的一些标记和地图外的一些 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';**
    });
  }
}
4

2 回答 2

3

这是一个常见的问题。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 中除外。

工作示例

于 2012-11-24T16:45:31.087 回答
0

谢谢，工作正常，但只有在我转换了 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')">
于 2012-11-25T13:19:48.357 回答