Google Maps API Marker Clusterer和Ajax

Question

我正在运行多个ajax调用来下载大量的Google地图图标。然而，当我尝试增加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（标记：阵列，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); 
    }