javascript 如何在谷歌地图 v3 中显示/隐藏 MarkerCluster？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4060241/
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
How to show/hide a MarkerCluster in google maps v3?
提问by Gabi Purcaru
I need to have different markers for different mapTypes, and I'm pushing them to a MarkerClusterer.
我需要为不同的mapTypes设置不同的标记，我将它们推送到MarkerClusterer。
I "hide" the markers with:
我“隐藏”了标记：
cluster.set("map", null);
cluster.resetViewport();
cluster.redraw();
And "show" them with:
并“展示”它们：
cluster.set("map", MAP);
cluster.resetViewport();
cluster.redraw();
The problem is that MarkerClusterer seems to not like set("map", null); it throws the error TypeError: Object #<a MarkerClusterer> has no method 'remove'. How can I show/hide them the proper way?
问题是 MarkerClusterer 似乎不喜欢set("map", null)；它抛出错误TypeError: Object #<a MarkerClusterer> has no method 'remove'。如何以正确的方式显示/隐藏它们？
采纳答案by Gabi Purcaru
I fought my way into solving this by a little monkeypatching and a little hack. I'm still waiting for a clean answer, but this isa solution to my problem, so I'm also posting this:
我通过一个小猴子补丁和一个小技巧来解决这个问题。我仍在等待一个干净的答案，但这是我问题的解决方案，所以我也发布了这个：
MarkerClusterer.prototype.remove = function () {}
[..]
cluster.set("map", HIDDEN_MAP); // remove the clusterer
cluster.resetViewport();
cluster.redraw();
回答by code-jaff
Elegant way to clear the cluster
优雅的清除集群的方法
cluster.clearMarkers();
回答by Micros
In the Javascript API v3 it is sufficient to say:
在 Javascript API v3 中，足以说明：
clusterer.setMap(null);
If you set your map back to the existing map object, the clusters will reappear.
如果您将地图设置回现有的地图对象，集群将重新出现。
clusterer.setMap( this.map );
Also, I would suggest not to name your Clusterer 'cluster', like in your example. The MarkerClusterer contains Cluster objects, which are the actual clustered markers and not the ClusterER itself.
另外，我建议不要像您的示例那样将您的 Clusterer 命名为“集群”。MarkerClusterer 包含 Cluster 对象，它们是实际的聚类标记，而不是 ClusterER 本身。
回答by Maurix
Here is a more complete solution:
这是一个更完整的解决方案：
in .html add:
在 .html 中添加：
<div id="map-canvas-hidden" style="display:none"></div>
<div id="map-canvas-shown" style="width:500px; height:500px"></div>
in .js add:
在 .js 中添加：
MarkerClusterer.prototype.remove = function() { };
var HIDDEN_MAP = new google.maps.Map(document.getElementById("map-canvas-hidden"), {});
var gmap = new google.maps.Map(document.getElementById("map-canvas-shown"), {});
to show the clusters:
显示集群：
cluster.setMap(gmap);
cluster.resetViewport();
cluster.redraw();
to hide the clusters:
隐藏集群：
cluster.setMap(HIDDEN_MAP);
cluster.resetViewport();
cluster.redraw();
finally, I needed the folowing patches to markerclusterer.js:
最后，我需要markerclusterer.js的以下补丁：
--- markerclusterer.js.orig 2013-12-06 18:02:32.887516000 +0100
+++ markerclusterer.js 2013-12-06 18:03:25.487516924 +0100
@@ -620,6 +620,7 @@
*/
MarkerClusterer.prototype.getExtendedBounds = function(bounds) {
var projection = this.getProjection();
+ if (!projection) return null;
// Turn the bounds into latlng.
var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),
@@ -657,7 +658,7 @@
* @private
*/
MarkerClusterer.prototype.isMarkerInBounds_ = function(marker, bounds) {
- return bounds.contains(marker.getPosition());
+ return bounds ? bounds.contains(marker.getPosition()) : false;
};
hope this helps
希望这可以帮助
回答by Bo.
Here is my code to easily show/hide clusters on the map (updated for the current versions of Maps API and JS-Cluster-Renderer). Thanks Gabi.
这是我的代码，用于在地图上轻松显示/隐藏集群（针对当前版本的 Maps API 和 JS-Cluster-Renderer 进行了更新）。谢谢加比。
MarkerClusterer.prototype.remove = function() {};
MarkerClusterer.prototype.hide = function() {
this.setMap(null);
this.resetViewport();
};
MarkerClusterer.prototype.show = function() {
this.setMap(map); // replace map with your reference to the map object
this.redraw();
};
// To hide the clusters:
cluster.hide();
// To show the clusters:
cluster.show();
