如何在谷歌地图 v3 中显示/隐藏 MarkerCluster？

Question

我需要为不同的 mapType 提供不同的标记，并且我将它们推送到 MarkerClusterer。

我用以下命令“隐藏”标记

cluster.set("map", null);
cluster.resetViewport();
cluster.redraw();

并用以下命令“显示”它们：

cluster.set("map", MAP);
cluster.resetViewport();
cluster.redraw();

问题是 MarkerClusterer 似乎不喜欢 set("map", null);它抛出错误 TypeError: Object #;没有方法“删除”。我怎样才能以正确的方式显示/隐藏它们？

Answer 1

在 Javascript API v3 中，这样说就足够了：

clusterer.setMap(null);

如果将地图设置回现有地图对象，则簇将重新出现。

clusterer.setMap( this.map );

另外，我建议不要将您的集群器命名为“集群”，就像您的示例中那样。 MarkerClusterer 包含 Cluster 对象，它们是实际的聚类标记，而不是 ClusterER 本身。

Answer 2

清除集群的优雅方式

cluster.clearMarkers();

Answer 3

这是一个更完整的解决方案：

在 .html 添加：

<div id="map-canvas-hidden" style="display:none"></div>
<div id="map-canvas-shown" style="width:500px; height:500px"></div>

在 .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"), {});

显示集群：

    cluster.setMap(gmap);
    cluster.resetViewport();
    cluster.redraw();

隐藏集群：

    cluster.setMap(HIDDEN_MAP);
    cluster.resetViewport();
    cluster.redraw();

最后，我需要对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;
 };

希望这会有所帮助

Answer 4

这是我的代码，用于轻松显示/隐藏地图上的集群（针对当前版本的 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();

Answer 5

我通过一点猴子补丁和一点黑客努力解决了这个问题。我仍在等待一个明确的答案，但这是我问题的解决方案，所以我也发布了这个：

MarkerClusterer.prototype.remove = function () {}

[..]

cluster.set("map", HIDDEN_MAP); // remove the clusterer
cluster.resetViewport();
cluster.redraw();