Question

我的网页上有一个谷歌地图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函数中使用2行代码，但它也没有工作。

如何将markerclusterer async设置为Map，以便在ajax函数完成后将标记显示为聚类？

Answer 1

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

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

在Ajax之后设置Marker Clusterer异步

2 个答案: