¿Cómo mostrar / ocultar una MarkerCluster en Google Maps v3?

Question

Es necesario disponer de diferentes marcadores para diferentes mapTypes, y los estoy empujando a un MarkerClusterer .

I "ocultar" los marcadores con:

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

Y "muestra" con:

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

El problema es que parece que no MarkerClusterer como set("map", null); que arroja la TypeError: Object #<a MarkerClusterer> has no method 'remove' error. ¿Cómo puedo mostrar / ocultar ellos la forma correcta?

Answer 1

Me abrí camino hacia la solución de este por una pequeña monkeypatching y un poco de truco. Todavía estoy esperando una respuesta limpia, pero esto es una solución a mi problema, así que también estoy publicando esto:

MarkerClusterer.prototype.remove = function () {}

[..]

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

Answer 2

manera elegante para despejar el cluster

cluster.clearMarkers();

Answer 3

En la versión 3 del API Javascript es suficiente decir:

clusterer.setMap(null);

Si establece la espalda mapa para el objeto de mapa existente, los grupos volverán a aparecer.

clusterer.setMap( this.map );

Además, sugeriría no nombrar a su 'cluster' Clusterer, al igual que en su ejemplo. El MarkerClusterer contiene objetos de clúster, que son los marcadores agrupados real y no la ClusterER sí mismo.

Answer 4

Aquí es una solución más completa:

En Agregar html:

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

en Js añaden:

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

para mostrar los grupos:

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

para ocultar los grupos:

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

Por último, necesitaba los parches folowing a 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;
 };

espero que esta ayuda

Answer 5

Aquí está mi código para mostrar / ocultar fácilmente racimos en el mapa (actualizado para las versiones actuales de API de Google Maps y JS-Cluster-Procesador). Gracias Gabi.

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();