Question

我在移动浏览器上遇到谷歌地图问题。

我正在处理的项目需要在地图上显示大约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);
});

Answer 1

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

google maps js api在添加标记时阻止ui

1 个答案: