添加大量标记时,Google Maps API V3非常慢

Question

我需要在Google Map上渲染许多标记和markerclusterer.我目前正在使用API​​(v3),并且在较慢的计算机上存在性能问题.我该怎么办？我正在使用ajax和XML

Answer 1

我不使用Markerclusterer,但我确保只在地图上设置了视口中的标记.对我来说,这显着提升了性能.

我使用了多个标记阵列作为不同的层.这些图层是通过在创建之后添加marker.display属性来控制的.这样,即使在视口中,这些也将被忽略.

使用"空闲"事件:一旦用户停止平移/缩放,"空闲"将触发,而不是在平移/缩放时连续触发"bounds_changed"事件.

在window.onload函数中将事件添加到地图中.

        google.maps.event.addListener(map, "idle", function (event) {
            if (map) {
                //This is the current user-viewable region of the map
                var bounds = map.getBounds();
                markerLayers.forEach(function (layer) {
                checkVisibleElements(layer, bounds);
                });
                checkVisibleElements(searchMarkers, bounds);
                //Loop through all the items that are available to be placed on the map
            }
        });


    function checkVisibleElements(elementsArray, bounds) {
        //checks if marker is within viewport and displays the marker accordingly - triggered by google.maps.event "idle" on the map Object
        elementsArray.forEach(function (item) {
            //If the item is within the the bounds of the viewport
            if (bounds.contains(item.position) && item.display == true) {
                //If the item isn't already being displayed
                if (item.map!=map){
                item.setMap(map);
                }
            } else {
                item.setMap(null);
            }
        });
    }

有关API(*)的更多信息:Google Maps API:许多标记!

(*)原始链接死亡,归档版本来自archive.org

Answer 2

这是gmap的一个已知问题.现在,按照此链接中提到的批量添加到DOM的建议.

侧面说明,有很多方法可以批量添加标记,包括MarkerLight和多标志,可能是速度不够快为您的需求没有直接的DOM操作.

Answer 3

如果您的自定义标记使用路径，请尝试使用图像（例如 svg）的 url。路径渲染速度很慢，但（共享）图标要快得多。