4

Google マップ内のいくつかのマーカーとマップ外のいくつかの div の間で通信しようとしています。マップ内のマーカーにマウス ポインターを合わせると、別の Div で背景色を変更したいと考えています。マーカーが 1 つしかない場合は問題なく動作しますが、例のように 5 つある場合は、リストの最後の 1 つだけが表示されます。

何故ですか？なにが問題ですか？誰かが私を助けることができますか？

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

これはよくある問題です。マーカーはグローバル変数であり、ループが終了すると、最後に作成されたものを指したままになります。関数クロージャー (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 に答える