Google Maps API Marker Clusterer和Ajax [英] Google Maps API Marker Clusterer and Ajax

问题描述

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

I am running multiple ajax calls to download a large number of google maps icons. When I try to increment the Marker Clusterer, however, the map clears all markers. I believe this is because I am calling var markerCluster = new MarkerCluster(map); in each AJAX call.

任何人都可以告诉我如何正确地实现这一点？

Can anyone tell me how to correctly implement this?

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

}

  );

}

推荐答案

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

I am running multiple ajax calls to download a large number of google maps icons. When I try to increment the Marker Clusterer, however, the map clears all markers. I believe this is because I am calling var markerCluster = new MarkerCluster(map); in each AJAX call.

任何人都可以告诉我如何正确实现这个功能吗？

Can anyone tell me how to correctly implement this?

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

Don't do that. Create the MarkerClusterer one time in the global scope (outside of any function), and add markers to it when you receive them from the server (assuming you aren't sending any duplicates).

请参阅文件

See the documentation

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

Looks like you are already adding arrays of markers to the MarkerClusterer:

addMarkers（markers：Array。，opt_nodraw：boolean）|无|向群集添加标记数组。

addMarkers(markers:Array., opt_nodraw:boolean) | None | Add an array of markers to the clusterer.

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

All you really need to do is move where you create the MarkerClusterer to the global scope. One suggestion below.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！