google maps js api blocks ui when adding markers

问题

I have a problem with google maps on mobile browsers.

The project I'm working on requires about 500 markers to be shown on a map, but when adding them, the ui freezes.

I'm using markerclusterer to add markers, and performance is fine once the markers are on the page. Is there a way to add the markers asynchronously, or to pause adding markers once the user starts scrolling?

This is the code we're using:

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

Thank you geocodezip, that worked like a charm! For anyone else with the same problem, here's how I fixed it:

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

回答1:

Add the markers asynchronously, use setTimeout to schedule the addition of each marker, which will give the browser some time to render and respond to the UI.

来源：https://stackoverflow.com/questions/33848296/google-maps-js-api-blocks-ui-when-adding-markers