Question

我需要在Google地图上呈现许多标记和标记包含者。我目前正在使用API（v3），并且在较慢的计算机上存在性能问题。我该怎么办？我正在使用ajax和XML

Answer 1

我没有使用Markerclusterer，但我确保只在地图中设置了视口中的标记。对我而言，这显着提升了表现。

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

使用＆＃34;空闲＆＃34;事件：＆＃34;空闲＆＃34;一旦用户停止平移/缩放，将触发，而不是＆＃34; bounds_changed＆＃34;平移/缩放时连续触发的事件。

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

（*）original link dead, archived version from archive.org

Answer 2

This is a known issue with gmap。现在，请按照建议批量添加到DOM at this link。

旁注，有一些方法可以批量添加标记，包括MarkerLight和MultiMarker，可以快速满足您的需求而无需直接操作DOM。

Answer 3

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

Answer 4

我发现这取决于您使用的标记。如果您使用的是标准标记，即使使用20K标记也没有问题。但是，当使用符号之一或自定义路径时，它几乎不能处理1K。不过，一种解决方法是，如果需要自定义形状/颜色，则将图像用作标记。您可以为标记生成变化的图像，然后根据条件选择要使用的图像。

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

4 个答案: