Question

我想根据用户观点显示大量标记。我正在寻找最有效的方法，当用户更改视点时，我可以快速更新我的地图。换句话说，只显示这些落入边界的标记（lg，ln）。

目前我的解决方案如下：

在页面加载时，从服务器提取有关所有位置的所有数据，并将其存储在数组中。
更新地图
每次用户拖动地图时，都会移除旧标记并将新标记放入绑定

目前的解决方案有效，但速度慢，效率低，复杂度较高，无法刷新地图O(N*M)，其中N旧标记需要删除，M新标记需要放在地图。

我想知道是否有人知道如何让它比这更快？

如何仅检测需要更新（删除/添加）的标记？

我一般都在寻找任何优化建议 - 可能是算法改进，技术或架构（在后端处理？）。

当前代码：

var places = function(){} // Some function that pulls a lot of places on page load

function updatePlaces(places){

    google.maps.Map.prototype.clearMarkers();
    if(places != null){
        for(var i = 0; i < places.length; i++){

            var lat = places[i].lat;
            var lng = places[i].lng;
            var position = new google.maps.LatLng(lat, lng);

            if(map.getBounds().contains(position) && placedMarkers < markerLimitNumber) {
                var marker = new MarkerWithLabel({
                    position: position,
                    draggable: false,
                    raiseOnDrag: true,
                    map: map,
                    labelContent: '',
                    labelAnchor: new google.maps.Point(-10, 15),
                    labelClass: "labels", // the CSS class for the label
                    labelStyle: {opacity: 1.0},
                    icon: 'images/markers/grey_circle_small.png'
                });

                marker.addListener('click', function(){});
                markers.push(marker);
                placedMarkers = placedMarkers + 1;
            }
        }
    }
}

google.maps.Map.prototype.clearMarkers = function() {
    for(var i=0; i < markers.length; i++){
        markers[i].setMap(null);
    }
    markers = new Array();
    placedMarkers = 0;
};

Answer 1

您可以尝试使用Google Map Marker Clusterer。它以低缩放级别隐藏标记，并以更高的缩放级别显示它们，并允许添加大量标记。

Answer 2

这是一篇关于此

的好文章

https://www.mapbox.com/blog/supercluster/?utm_source=newsletter_april&utm_medium=email&utm_content=supercluster&utm_campaign=newsletter_april

请看一下

优化地图数据

2 个答案: