Google Maps API Marker Clusterer и Ajax

Question

Я запускаю несколько вызовов ajax для загрузки большого количества значков карт Google. Однако, когда я пытаюсь увеличить маркер кластера, карта очищает все маркеры. Я считаю, что это потому, что я звоню 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 вызовов, чтобы загрузить большое количество Google Maps иконки. Однако, когда я пытаюсь увеличить маркер кластера, карта очищает все маркеры. Я считаю, что это потому, что я вызываю var markerCluster = new MarkerCluster (map); в каждом вызове AJAX.

Может ли кто-нибудь сказать мне, как правильно это реализовать?

Не делайте этого. Создавайте MarkerClusterer один раз в глобальной области (вне любой функции) и добавляйте к нему маркеры, когда вы получаете их с сервера (при условии, что вы не отправляете какие-либо дубликаты).

См documentation

Похоже, вы уже добавлять массивы маркеров в MarkerClusterer:

addMarkers (маркеры: Array, 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); 
    }