javascript 添加大量标记时，Google Maps API V3 非常慢
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21580902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps API V3 very slow when adding lots of Markers
提问by Koukouan
I have many markers and markerclusterer I need to render on Google Map. I'm currently using the API (v3) and there are performance issues on slower machines. What should I do please?? I'm using ajax and XML
我有很多标记和标记集群需要在 Google 地图上呈现。我目前正在使用 API (v3)，但在较慢的机器上存在性能问题。请问我该怎么办？？我正在使用 ajax 和 XML
回答by Sven Dhaens
I don't use Markerclusterer but I make sure only the markers in the viewport are set on the map. for me this had significant boost in performance.
我不使用 Markerclusterer，但我确保只有视口中的标记设置在地图上。对我来说，这显着提高了性能。
I used multiple arrays of markers that act as different layers. These layers are controlled by adding a marker.display attribute after creation wich I later play with. This way these will be ignored even if within the viewport.
我使用了多个充当不同层的标记数组。这些层是通过在创建后添加一个marker.display 属性来控制的，我稍后会使用它。这样，即使在视口内，这些也将被忽略。
Use the "idle" event: the "idle" will fire once the user has stopped panning/zooming, rather then "bounds_changed" event wich fires continuously when panning/zooming.
使用“空闲”事件：一旦用户停止平移/缩放，“空闲”将触发，而不是在平移/缩放时连续触发的“bounds_changed”事件。
Add the event to the map in your window.onload function.
将事件添加到 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);
}
});
}
more info about the API(*) : Google Maps API : To Many Markers!
有关 API(*) 的更多信息：Google Maps API：To Many Markers！
回答by bishop
This is a known issue with gmap. For now, follow the suggestion to bulk add to the DOM as mentioned at this link.
这是 gmap 的一个已知问题。现在，请按照此链接中提到的建议批量添加到 DOM 。
Side note, there are ways to add markers in bulk including MarkerLightand MultiMarkerthat may be fast enough for your needs without direct DOM manipulation.
侧面说明，有办法在散装包括添加标记MarkerLight和多标志，可能是速度不够快为您的需求没有直接的DOM操作。
回答by ZephDavies
If your custom marker is using a path, try using a url to an image (e.g. svg) instead. Path rendering is slow, but a (shared) icon is much faster.
如果您的自定义标记使用路径，请尝试使用图像的 url（例如 svg）。路径渲染很慢，但（共享）图标要快得多。
回答by Billy Jacobson
I've found that this depends on the marker you are using. If you are using the standard marker, I've had no issues with even 20K markers. When using one of the symbols or a custom path though, it can barely handle 1K. A work around to this though is to use an image as your marker if you need a custom shape/color. You can generate the varying images for your markers and then select which to use based on criteria.
我发现这取决于您使用的标记。如果您使用的是标准标记，那么即使是 20K 标记也没有问题。但是，当使用其中一个符号或自定义路径时，它几乎无法处理 1K。如果您需要自定义形状/颜色，解决此问题的方法是使用图像作为标记。您可以为标记生成不同的图像，然后根据标准选择要使用的图像。
