Question

我正在运行多个ajax调用来下载大量的谷歌地图图标。但是，当我尝试增加Marker Clusterer时，地图会清除所有标记。我相信这是因为我在每个AJAX调用中调用var markerCluster = new MarkerCluster(map);。

有谁能告诉我如何正确实现这个？

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);
}

}

  );

}

Answer 1

我正在运行多个ajax调用来下载大量的谷歌地图图标。但是，当我尝试增加Marker Clusterer时，地图会清除所有标记。我相信这是因为我正在调用var markerCluster = new MarkerCluster（map）;在每个AJAX调用中。

有谁能告诉我如何正确实现这个？

不要那样做。在全局范围内（在任何函数之外）创建MarkerClusterer一次，并在从服务器接收时为其添加标记（假设您没有发送任何重复项）。

请参阅documentation

看起来您已经在MarkerClusterer中添加了标记数组：

addMarkers（markers：Array。，opt_nodraw：boolean）|没有|将一组标记添加到clusterer。

您真正需要做的就是将创建MarkerClusterer的位置移动到全局范围。一个建议如下。

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);
   }

Google Maps API Marker Clusterer和Ajax

1 个答案: