javascript - 添加大量标记时，Google Maps API V3 非常慢

Question

我有很多标记和 markerclusterer 需要在 Google map 上呈现。我目前正在使用 API (v3)，在速度较慢的机器上存在性能问题。请问我该怎么办？？我正在使用 ajax 和 XML

Answer 1

我不使用 Markerclusterer，但我确保只有视口(viewport)中的标记被设置在 map 上。对我来说，这显着提高了性能。

我使用了多个标记阵列作为不同的图层。这些层是通过在创建后添加一个 marker.display 属性来控制的，我稍后会玩。这样，即使在视口(viewport)内，这些也会被忽略。

使用“idle”事件:“idle”将在用户停止平移/缩放后触发，而不是在平移/缩放时连续触发的“bounds_changed”事件。

在您的 window.onload 函数中将事件添加到 map 。

        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 : To Many Markers!

(*) original link dead, archived version from archive.org