如何加速Google Map Marker Cluster？3000个标记加载耗时8秒求优化

1. 批量处理地图边界适配，避免循环内重复重绘 #

原代码在循环中每次扩展边界后立即调用map.fitBounds(bounds)，会触发上千次地图重绘，是核心性能瓶颈之一。改为先收集所有有效坐标，循环结束后统一适配边界：

// 提前初始化边界对象
var bounds = new google.maps.LatLngBounds();
// 先过滤掉无效坐标，减少循环次数
var validLocations = dynamicMarkers.filter(location => location.Latitude.trim() !== "");

var allmarkers = validLocations.map(function(location, i) {
    var icon = iconBlue;
    var latLng = new google.maps.LatLng(location.Latitude, location.Longitude);
    
    // 仅扩展边界，不立即触发地图适配
    if (mapZoomed == 0) {
        bounds.extend(latLng);
    }
    
    var mText = kFormatter(location.PriceCurrentForStatus);
    var marker = new google.maps.Marker({
        position: latLng,
        icon: icon,
        label: {
            color: '#fff',
            fontSize: '11px',
            text: mText
        }
    });
    marker.location = location;
    
    // ... 其余Marker逻辑
});

// 循环结束后统一适配边界
if (mapZoomed == 0 && validLocations.length > 0) {
    map.fitBounds(bounds);
}

2. 移除循环内的冗余日志输出 #

删除循环中的console.log("End")，3000次日志输出会占用大量CPU资源。

3. 优化Marker点击事件绑定，减少闭包冗余 #

原代码为每个Marker创建独立的闭包事件处理器，改为共享统一的事件函数，降低内存占用：

// 定义统一的点击事件处理器
function handleMarkerClick() {
    var marker = this;
    content = loaderContent;
    infoWin.setContent(content);
    infoWin.open(map, marker);
    
    $.ajax({
        url: baseurl + "/home-search/map/infowindow/" + marker.location.id,
        type: 'GET',
        success: function(data) {
            infoWin.setContent(data.htmlContent);
        }
    });
}

// Marker创建后绑定事件
marker.addListener('click', handleMarkerClick);

4. 复用坐标对象，避免重复实例化 #

创建Marker和扩展边界时复用同一个google.maps.LatLng对象，减少不必要的对象创建开销：

var latLng = new google.maps.LatLng(location.Latitude, location.Longitude);
// 扩展边界使用该对象
bounds.extend(latLng);
// Marker位置也使用该对象
var marker = new google.maps.Marker({
    position: latLng,
    // ... 其他配置
});

5. 优化MarkerClusterer配置，降低聚合计算开销 #

给聚合器添加针对性配置，减少不必要的计算和动画：

var mcOptions = {
    styles: clusterStyles,
    maxZoom: 15, // 设置最大聚合缩放级别，超过后不再聚合
    gridSize: 60, // 调整聚合网格大小，平衡聚合效果与计算量
    zoomOnClick: false, // 关闭默认点击聚合点缩放行为，与自定义逻辑兼容
    averageCenter: true // 使用聚合点的平均中心，提升视觉体验
};
markerCluster = new MarkerClusterer(map, allmarkers, mcOptions);

6. 可选：升级到Google Maps Advanced Markers #

如果项目允许升级到最新API，Advanced Markers采用Canvas渲染，相比传统DOM Marker性能提升显著，适合大量Marker场景。

内容的提问来源于stack exchange，提问作者Marimuthu M