1

重複の可能性:
Google マップ - 複数のマーカー - 1 つの InfoWindow の問題

いくつかの町や場所をプロットした地図を作成しています。ご覧のとおり、マーカーをクリックすると、対応するページにリダイレクトされます。しかし今、リンクとその他の情報を情報バブル ポップオーバーに入れたいと思います。したがって、コードを次のように編集しました。

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
    var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5],});
    marker[i] = marker;
    google.maps.event.addListener(marker[i], 'click', function() { 
      infobulle.open(map, marker);
    });
  }
}

しかし、ここでわかるように、情報バブルは最後の場所で「ブロック」されたままです。これを並べ替える方法が本当にわかりません。

私はこれと同じ結果を持っています:

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
  var beach = locations[i];
  var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
  var infobulle = new google.maps.InfoWindow({content: beach[4]});
  var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]});

  google.maps.event.addListener(marker, 'click', function() { 
    infobulle.open(map, marker);
  });
}

最後のバージョン ：

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
    processBeach(locations[i]);
  }
}
function processBeach(beach) {
  var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
  var infobulle = new google.maps.InfoWindow({content: beach[4]});
  var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]});
  google.maps.event.addListener(marker, 'click', function() { 
infobulle.open(map, marker);
  });
}
4

2 に答える 2

1

marker変数を2つの異なる目的で使用しているようです。1 つは単一のマーカーで、もう 1 つはマーカーの配列です。ただし、クロージャーを使用する場合は、マーカーの配列は必要ありません。これを試して：

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
    (function(beach) {
      var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
      var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
      var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}))
      google.maps.event.addListener(marker, 'click', function() { 
        infobulle.open(map, marker);
      });
    }(locations[i]));
  }
}

ちなみに、options 配列の最後に偽のカンマがgoogle.maps.Markerあり、一部のブラウザで問題が発生する可能性があります。

編集

クロージャーを使用したくない場合、これは同等です：

function processBeach(beach) {
  var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
  var infobulle = new google.maps.InfoWindow({content: beach[4], position: myLatLng});
  var marker = new google.maps.Marker({position: myLatLng, map: map, title: beach[0], zIndex: beach[3], clickable: true, icon: beach[5]}))
  google.maps.event.addListener(marker, 'click', function() { 
    infobulle.open(map, marker);
  });
}

function setMarkers(map, locations) {
  for (var i = 0; i < locations.length; i++) {
    processBeach(locations[i]);
  }
}
于 2013-02-02T11:42:34.473 に答える
0

ここで私のjSFiddleを見てください。不足しているコードは

  1. クリックすると、マップから現在の情報ウィンドウを取得し、新しい情報で更新する必要があります
  2. 人々が閉じたいときにウィンドウを開いたり閉じたりしたい場合は、トグル型の変数を設定して、クリックすると各ウィンドウが作成され、誰かが閉じるをクリックすると消えるようにする必要があります。しかし、最初の部分だけを完了する必要があると思います。

私のフィドルで見るべきコードは、120行目から150行目です。これは、情報ウィンドウが存在するかどうかを確認し、新しいマーカーで同じウィンドウを開いて、古いマーカーから新しいマーカーに移動します。新しいウィンドウを作成し続けると、古いウィンドウは魔法のように閉じません。

var map = $(this).gmap3("get"),
      infowindow = $(this).gmap3({get:{name:"infowindow"}}); // Get current info window
    if (infowindow){ // if infoWindow is there then use it else create new
      infowindow.open(map, marker);
      infowindow.setContent(context.data.ht);
      jQuery("#customPopup").html(context.data.ht);
        jQuery("#customPopup").show(500);
    } else {
      $(this).gmap3({
        infowindow:{
          anchor:marker, 
          options:{content: context.data.ht}

        }
      });
        jQuery("#customPopup").html(context.data.ht);
        jQuery("#customPopup").show(500);
    }
于 2013-02-02T15:34:27.127 に答える