Javascript google maps js api在添加标记时阻止用户界面

我对移动浏览器上的谷歌地图有一个问题

我正在处理的项目需要在地图上显示大约500个标记，但添加它们时，ui会冻结

我正在使用markerclusterer添加标记，一旦标记出现在页面上，性能就很好了。有没有办法异步添加标记，或者在用户开始滚动时暂停添加标记

这是我们正在使用的代码：

var mcOptions = { gridSize: 50, maxZoom: 15, zoomOnClick: false };
var mc = new MarkerClusterer(context.map, [], mcOptions);

getMarkerLocations().then(function(branches){    
    branches.forEach(function(branch) => {
        var marker = new google.maps.Marker({
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 2,
                strokeColor: 'red',
                fillColor: 'red',
                strokeWeight: 2,
                fillOpacity: 1
            },
            position: new google.maps.LatLng(branch.Latitude, branch.Longitude),
            visible: true
        });
        mc.addMarker(marker);
    });
});

谢谢你，geocodezip，真是妙不可言！对于其他有同样问题的人，我是这样解决的：

.then(function(branches){
    var loopFunction = function(branchesToAdd) => {
                if (branchesToAdd.length === 0) return;
            var item = branchesToAdd.pop();
            var marker = new google.maps.Marker({
                ....
            });
            mc.addMarker(marker);
            setTimeout(function(){loopFunction(branchesToAdd)}, 30);
        };

    loopFunction(branchesToShow);
});

---

异步添加标记，使用setTimeout计划每个标记的添加，这将给浏览器一些时间来呈现和响应UI。

我喜欢你的答案，但是，我也有一个标记计算器，并在使用fitbounds构建地图后缩放地图。我试图遵循您的代码，但我的缩放在第一次迭代后运行。我该如何防止这种情况？你能把整个承诺书拿出来吗？