结合 Google Maps MarkerClusterer v3 和 Viewport Marker Management答案

【问题标题】：Combining Google Maps MarkerClusterer v3 and Viewport Marker Management结合 Google Maps MarkerClusterer v3 和 Viewport Marker Management
【发布时间】：2012-05-11 10:25:17
【问题描述】：

我已成功设置 MarkerClusterer v3 和 Viewport Marker Management（执行 ajax 调用以仅收集在视口中可见的标记，并在地图“空闲”时渲染这些标记）。

但是，当我将它们组合在一起时，它们似乎只在页面第一次加载而不是之后一起工作。

在缩放或平移时，保留初始集群，并且整个地图的标记呈现为非集群状态，但保留先前集群的标记。

当您放大/缩小时，原始的集群标记仍然可以正常工作，但在更改视口边界时提供的新标记不会添加到它们或集群。

代码如下：

function drawMap(swLat, swLng, neLat, neLng){
    //Load the map data
     $.ajax({
            type: "POST",
            url: "readMapInfo.php",
            cache: false,
            data:{S:swLat, W:swLng, N:neLat, E:neLng},
            dataType: "xml",
            success: function(data) {
            if(markerArray.length >0){
                for (i in markerArray) {
                    markerArray[i].setMap(null);
                }
                drawMarker(data);   //takes the info provided and performs "markerArray.push(marker);"
                mc = new MarkerClusterer(map, markerArray, clusterOptions);
            } else {
                drawMarker(data);   //takes the info provided and performs "markerArray.push(marker);"
                mc = new MarkerClusterer(map, markerArray, clusterOptions);
            }
    });
}

google.maps.event.addListener(map, 'idle', function() {
    bounds = map.getBounds();
    sw = bounds.getSouthWest();
    ne = bounds.getNorthEast();
    swLat = sw.lat();
    swLng = sw.lng();
    neLat = ne.lat();
    neLng = ne.lng();

    drawMap(swLat, swLng, neLat, neLng);
});

【问题讨论】：

嗨，我知道这是一篇旧帖子。我也在尝试做类似的事情。你能帮我吗？谢谢

标签： javascript jquery google-maps-api-3 viewport markerclusterer

【解决方案1】：

您对问题的描述详细而透彻，但如果还有一个指向某个页面的 URL 来说明问题，那就更容易了。当然，在这种特定情况下，这可能是不可能的。也就是说，我会尽力提供帮助：

我相信您在 ajax 成功回调的开头需要一些额外的清理代码：

if( markerArray.length > 0 ) {
    // For loop logic is unchanged
    // It removes the markers from the Map, but leaves them in markerArray
    for (i in markerArray) {
        markerArray[i].setMap( null );    
    }

    // New code to truncate the Array; the markers should be removed
    markerArray.length = 0;

    // New code to clear the clusterer; the markers should be removed
    mc.clearMarkers();        

    // Original line of code unchanged
    drawMarker(data);   //takes the data and performs markerArray.push(marker)

    // Commented out, because the cluster is cleared each time, not recreated
    //mc = new MarkerClusterer(map, markerArray, clusterOptions);

    // New code to refill the cluster, rather than recreate the cluster
    // The original clusterOptions are retained
    mc.addMarkers( markerArray );

} else {
    // Original line of code unchanged
    drawMarker(data);   //takes the data and performs markerArray.push(marker)

    // Original line of code unchanged
    // Necessary here, because the clusterer does not yet exist
    mc = new MarkerClusterer(map, markerArray, clusterOptions);
}

我相信这将有助于您前进。如果这能解决问题或至少有帮助，请告诉我。

在你解决眼前的挑战后，我也建议你看看MarkerClustererPlus；它在问题中有所描述：Is there any way to disable the Marker Clusterer for less than defined marker counts?。

【讨论】：