在 Ajax 之后设置 Marker Clusterer 异步

Question

我的网页上有一个 Google Maps v3，它将设置很多标记 (3000 - 5000)。

这是我现在的缩短代码：

function initialize(){
    var map = new google.maps.Map(document.getElementById("map_canvas"),
                mapOptions);

    $.ajax({
        type: 'POST',
        dataType: 'json',
        url: Routing.generate('turn_getajaxfirstpoiofallturns'),
        async: false
    })
    .done(function(response){
        firstPoiOfAllTurns = response;
        for (var i = 0; i < firstPoiOfAllTurns.length; ++i) {
            markers.push(addMarker(map, firstPoiOfAllTurns[i].pois[0], firstPoiOfAllTurns[i].id, '' ,infowindow));
         }
    })
    .fail(function(jqXHR, textStatus, errorThrown){
        alert('Error : ' + errorThrown);
    });

    var mcOptions = {gridSize: 50, maxZoom: 15};
    var mc = new MarkerClusterer(map, markers, mcOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

我想去掉这段代码中的async: false 部分，这样即使标记尚未设置，网站也能正常工作。到目前为止这有效，但如果我将async: false 带走，则不会设置 MarkerClusterer。所以会显示标记，但是没有集群，地图真的很慢。

然后我尝试在.done 函数中也使用这两行代码，但它也没有工作。

如何将markerclusterer 异步设置为Map，以便在ajax 函数完成后以集群方式显示Markers？

Answer 1

您可以在 ajax 调用之前创建标记聚类器，并将每个创建的标记添加到 for 循环中的标记聚类器：

    for (var i = 0; i < firstPoiOfAllTurns.length; ++i) {
        // markers.push(addMarker(map, firstPoiOfAllTurns[i].pois[0], firstPoiOfAllTurns[i].id, '' ,infowindow));

        mc.addMarker(addMarker(map, firstPoiOfAllTurns[i].pois[0], firstPoiOfAllTurns[i].id, '' ,infowindow), true);
     }

我假设addMarker() 创建一个新标记。

Answer 2

另一种选择是将集群器的创建和初始化移到创建标记的回调函数中：

.done(function(response){
    firstPoiOfAllTurns = response;
    for (var i = 0; i < firstPoiOfAllTurns.length; ++i) {
        markers.push(addMarker(map, firstPoiOfAllTurns[i].pois[0], firstPoiOfAllTurns[i].id, '' ,infowindow));
     }
     var mcOptions = {gridSize: 50, maxZoom: 15};
     var mc = new MarkerClusterer(map, markers, mcOptions);
})