谷歌地图API标记聚类器和Ajax(Google Maps API Marker Clusterer

2019-11-01 18:11发布

我运行多个AJAX调用,以下载大量的谷歌地图的图标。 当我尝试递增标记聚类器,然而,地图清除所有标记。 我相信这是因为我打电话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);
}

}

  );

}

Answer 1:

我运行多个AJAX调用,以下载大量的谷歌地图的图标。 当我尝试递增标记聚类器,然而,地图清除所有标记。 我相信这是因为我打电话VAR markerCluster =新MarkerCluster(图) 在每个AJAX调用。

谁能告诉我如何正确地实现这一点?

不要那样做。 创建一个在全球范围内MarkerClusterer一次(以外的任何功能),而当你从服务器接收它们(假设你不发送任何副本)添加标记它。

查看文档

看起来你已经添加标记到MarkerClusterer的数组:

addMarkers |(标记:阵列,opt_nodraw布尔值。) 无| 添加标记的数组的聚类器。

在您创建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 and Ajax