3

何千ものポイントをプロットしてそれらをクラスター化する、ますます複雑なGoogleマップがあります。ユーザーがマップ マーカーの 1 つをクリックすると情報ウィンドウが開き、すべてうまく機能します。ただし、私がやりたい改善点の 1 つは、新しい情報ウィンドウを開いたときに、他のすべての情報ウィンドウを強制的に閉じて、一度に 1 つの情報ウィンドウしか開かないようにすることです。

これを行うためにリスナー関数にコード ( if (infowindow) infowindow.close();) を追加しようとしましたが、現在各マーカーの情報ウィンドウを作成していて、開くイベントで他の情報ウィンドウにアクセスできないという点で、問題はより広いと思います。新しいもの。したがって、これを読んでみると、多くの情報ウィンドウよりも、再利用される情報ウィンドウを 1 つだけ持つ方がよいと思われます。

問題は、コードが私が本当に理解できる限界にあり、これまでの私の実験ではすべてが壊れてしまったことです。

私が現在持っているコードは次のとおりです。

var _iconCenter = new google.maps.MarkerImage('/css/img/map-marker.png',
  new google.maps.Size(38, 48),
  new google.maps.Point(0,0),
  new google.maps.Point(19, 44));

var shadow = new google.maps.MarkerImage('/css/img/map-marker-shadow.png',
  new google.maps.Size(57, 49),
  new google.maps.Point(0,0),
  new google.maps.Point(7, 44));

var _icon = '/css/img/map-marker-purple.png';
var infowindow;
var markersArray = [];
var map;
var currentPosition = 0;
var currentmarker;
var firstload = true;
var maploaded = false;
var interval = 5000;
var geocoder;

var stylez = [];

function initialize(items,loop,zoom) {
  geocoder = new google.maps.Geocoder();
  if (items.length > 0) {
    var latlng = new google.maps.LatLng(items[0].Lat, items[0].Lng);
    var myOptions = {
      zoom: zoom,
      center: latlng,
      //mapTypeControl: false,
      streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map"), myOptions);
    map.setOptions({styles: stylez});

    for (var i = 0; i < items.length; i++) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(items[i].Lat, items[i].Lng),
        title: items[i].Title,
        icon: _icon,
        shadow: shadow,
        infocontent: items[i].Description
      });
      marker.setMap(map);
      attachListener(marker,'marker:'+i);
      markersArray.push(marker);
    }


    //set style options for marker clusters (these are the default styles)
    mcOptions = {
      gridSize: 44
    }


    var markerCluster = new MarkerClusterer(map, markersArray, mcOptions);
    google.maps.event.addListener(map, "tilesloaded", function () {
      if(loop == true){
        SetLoop();
      }
    });


    function attachListener(marker,content){
      google.maps.event.addListener(marker, "click", function () {
        var infowindow = new google.maps.InfoWindow();
        map.setCenter(new google.maps.LatLng(marker.getPosition().lat(), marker.getPosition().lng()));
        infowindow.setContent(content);
        infowindow.open(map,this);
      });
    }    

  }
}


function SetLoop() {
//This will fire everytime map loads or recenteres
  maploaded = true;
  if (firstload) {
    firstload = false;
    Recenter();
  }
}


function Recenter() {
  //If previous iteration is not loaded completely, wait to avoid errors
  //It could happen for slow internet connection
  if (maploaded) {
    maploaded = false;
  } else {
    //keep adding 1 second to interval for slow connection till page loads
    interval = interval + 1;
    setTimeout("Recenter()", interval);
    return;
  }

  if (infowindow != null && currentmarker != null) {
    //currentmarker.icon = _icon;
    currentmarker.icon = _iconCenter;
    currentmarker.setMap(map);
    infowindow.close(map, currentmarker);
  }

  markersArray[currentPosition].icon = _iconCenter;
  markersArray[currentPosition].setMap(map);
  map.setCenter(new google.maps.LatLng(markersArray[currentPosition].getPosition().lat(), markersArray[currentPosition].getPosition().lng()));

  infowindow = new google.maps.InfoWindow({
    content: markersArray[currentPosition].infocontent,
    size: new google.maps.Size(50, 50)
  });
  infowindow.open(map, markersArray[currentPosition]);
  currentmarker = markersArray[currentPosition];
  if (currentPosition >= markersArray.length - 1) {
    currentPosition = 0;
  } else {
    currentPosition++;
  }
  if (markersArray.length > 1) {
    setTimeout("Recenter()", interval);
  }
}

情報ウィンドウを再利用する最善の方法はありますか、それとも別の方法で実行しても問題ありませんか? ここで私を正しい方向に向ける助けがあれば、大歓迎です、ありがとう！

4

1 に答える 1

9

関数 attachListener() から「var infowindow」宣言を削除します。関数内で宣言すると、関数に対してローカルになり、関数を実行するたびに新しいインスタンスが作成されます。それで：

function attachListener(marker,content){
      google.maps.event.addListener(marker, "click", function () {

      // marker.getPosition() already returns a google.maps.LatLng() object
      map.setCenter(marker.getPosition());
      infowindow.close();
      infowindow.setContent(content);
      infowindow.open(map,this);
      });
    }

代わりに、グローバル変数として宣言します。

var _icon = '/css/img/map-marker-purple.png';
var infowindow = new google.maps.InfoWindow();
//...etc

アプリケーション全体で情報ウィンドウ オブジェクトが 1 つだけになるようにします。

于 2012-08-16T09:58:51.560 に答える