0

多数の Google マップ アイコンをダウンロードするために、複数の ajax 呼び出しを実行しています。ただし、Marker Clusterer をインクリメントしようとすると、マップはすべてのマーカーをクリアします。var markerCluster = new MarkerCluster(map);これは、各 AJAX 呼び出しで呼び出しているためだと思います。

これを正しく実装する方法を誰か教えてもらえますか?

var populateMapByIncident = function(incident, page) {
  var run_again = false;
  $.getJSON(
    "/public_map_ajax_handler",
    {"shortname" : incident, "page": page},
    function(sites_list) {
    if (sites_list.length > 2) {
      run_again = true;
    }
          var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(40.6501038, -73.8495823),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
       var markers = [];
       var i = 0;


   for (var i = 0; i < sites_list.length; i++) {
 var latLng = new google.maps.LatLng(sites_list[i].latitude, sites_list[i].longitude);
 var marker = new google.maps.Marker({'position': latLng, 
                     'icon': getMarkerIcon(sites_list[i]), 
                     'site_id': sites_list[i].id, 
                      'case_number': sites_list[i].case_number, 
                      'work_type': sites_list[i].work_type, 
                      'floors_affected': sites_list[i].floors_affected, 
                      'status': sites_list[i].status});
 markers.push(marker);
 var site_id = sites_list[i].id;
google.maps.event.addListener(marker, "click", function() {
  new Messi('<p>Name, Address, Phone Number are removed from the public map</p><p>Details: work type: '
  + this.work_type+ ', floors affected: ' + this.floors_affected + '</p>' + '<p>Status: ' + this.status + '</p>',
  {title: 'Case Number: ' + this.case_number, titleClass: 'info', 
  buttons: [
  {id: 0, label: 'Printer Friendly', val: "On the live version, this would send all of this site's data to a printer friendly page." }, 
  {id: 1, label: 'Change Status', val: "On the live version, you would be able to change the site's status here."}, 
  {id: 2, label: 'Edit', val: "On the live version, you would be able to edit the site's info, as new details come in."}, 
  {id: 3, label: 'Claim', val: "On the live version, clicking this button would 'Claim' the site for your organization, letting other organizations know that you intend to work on that site"},
  {id: 4, label: 'Close', val: 'None'}], callback: function(val) { if (val != "None") {Messi.alert(val);} }});

});
   }

   var markerCluster = new MarkerClusterer(map);
   markerCluster.addMarkers(markers);


    if (run_again == true) {
  populateMapByIncident(incident, page + 1, markers);
} else {
      markerCluster.addMarkers(markers);
}

}

  );

}
4

1 に答える 1

3

多数の Google マップ アイコンをダウンロードするために、複数の ajax 呼び出しを実行しています。ただし、Marker Clusterer をインクリメントしようとすると、マップはすべてのマーカーをクリアします。これは、 var markerCluster = new MarkerCluster(map); を呼び出しているためだと思います。各 AJAX 呼び出しで。

これを正しく実装する方法を誰か教えてもらえますか?

そうしないでください。MarkerClusterer をグローバル スコープ (関数の外部) で 1 回作成し、サーバーからマーカーを受信したときにマーカーを追加します (重複を送信していないと仮定します)。

ドキュメントを見る

MarkerClusterer にマーカーの配列を既に追加しているようです。

addMarkers(markers:Array., opt_nodraw:boolean) | なし | クラスタラーにマーカーの配列を追加します。

実際に行う必要があるのは、MarkerClusterer を作成した場所をグローバル スコープに移動することだけです。以下に 1 つの提案を示します。

var markerCluster = new MarkerClusterer(map);  // <------------- add this
var populateMapByIncident = function(incident, page) {
  var run_again = false;
  $.getJSON(
// ----- existing code ------- //
// leave as is
// ----- modification -------- //
// var markerCluster = new MarkerClusterer(map); <----------- remove this
   markerCluster.addMarkers(markers);

   if (run_again == true) {
    populateMapByIncident(incident, page + 1, markers);
   } else {
    markerCluster.addMarkers(markers);
   }
于 2013-03-12T03:59:25.723 に答える