谷歌地图API V3在添加大量标记时非常缓慢

Question

我有许多标记和聚类标记需要在谷歌地图上呈现。我目前使用的是API（v3），在较慢的计算机上存在性能问题。请问该怎么办？ 我正在使用Ajax和XML。

- Koukouan

Answer 1

我没有使用Markerclusterer，但是我确保只有在视口中的标记被设置在地图上。对我来说，这显著提升了性能。

我使用了多个标记数组作为不同的层。这些层通过创建后添加一个marker.display属性进行控制，稍后可以对其进行操作。这样即使在视口内也会被忽略。

使用"idle"事件：当用户停止平移/缩放时，“idle”事件将触发，而不是“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 地图 API：标记过多！

(*)原链接已失效，这是来自 archive.org 的存档版本

- Sven Dhaens

---

谢谢Sven。这是一个很棒的脚本。 - Ganesh Bhosale

Answer 2

这是gmap已知的问题。暂时，按照建议使用DOM批量添加，如此链接中所述 （链接）。

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

- bishop

---

很好，如果它对你有用，请记得点赞并接受答案。如果不行，请在评论中说明你还需要什么。欢迎来到SO。 - bishop

Answer 3

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

- ZephDavies

---

这是一个好的提示 - 我用一个 URL 替换了基于 SVG 路径的自定义图标，这使得地图组件的性能大大提高！ - martinethyl

Answer 4

我发现这取决于您使用的标记。如果您使用标准标记，则即使有20K个标记，也不会出现任何问题。但是，如果使用其中一个符号或自定义路径，则最多只能处理1K个标记。不过，解决此问题的方法是，如果需要自定义形状/颜色，请使用图像作为标记。您可以为标记生成不同的图像，然后根据条件选择使用哪个。

- Billy Jacobson