Wie kann man einen MarkerCluster in Google Maps v3 einblenden/ausblenden?

Question

Ich muss verschiedene Markierungen für verschiedene mapTypes haben und sie zu einem MarkerClusterer hinzufügen.

Ich "verstecke" die Markierungen mit:

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

Und "zeige" sie mit:

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

Das Problem ist, dass der MarkerClusterer set("map", null) anscheinend nicht mag; er wirft den Fehler TypeError: Object # has no method 'remove'. Wie kann ich sie auf die richtige Weise anzeigen/verstecken?

Answer 1

Im Javascript API v3 reicht es aus zu sagen:

clusterer.setMap(null);

Wenn Sie Ihre Karte wieder auf das vorhandene Kartenobjekt setzen, werden die Cluster wieder angezeigt.

clusterer.setMap( this.map );

Außerdem würde ich vorschlagen, Ihren Clusterer nicht wie in Ihrem Beispiel 'cluster' zu nennen. Der MarkerClusterer enthält Cluster-Objekte, die die tatsächlich gruppierten Marker sind und nicht der ClusterER selbst.

Answer 2

Elegante Möglichkeit, den Cluster zu löschen

cluster.clearMarkers();

Answer 3

Hier ist eine umfassendere Lösung:

Füge in .html hinzu:

Füge in .js hinzu:

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

Um die Cluster anzuzeigen:

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

Um die Cluster zu verstecken:

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

Zuletzt benötigte ich die folgenden Patches für 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;

   // Wandle die Grenzen in Lat/Lng um.
   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;
 };

Ich hoffe, das hilft

Answer 4

Hier ist mein Code, um Cluster auf der Karte einfach anzuzeigen/auszublenden (aktualisiert für die aktuellen Versionen der Maps API und JS-Cluster-Renderer). Vielen Dank, Gabi.

MarkerClusterer.prototype.remove = function() {};

MarkerClusterer.prototype.hide = function() {
  this.setMap(null);
  this.resetViewport();
};

MarkerClusterer.prototype.show = function() {
  this.setMap(map); // Ersetzen Sie map durch Ihre Referenz zum Kartenobjekt
  this.redraw();
};

// Um die Cluster auszublenden:
cluster.hide();

// Um die Cluster anzuzeigen:
cluster.show();

Answer 5

Ich habe meinen Weg gefunden, dieses Problem zu lösen, indem ich ein wenig Monkeypatching und einen kleinen Hack gemacht habe. Ich warte immer noch auf eine saubere Antwort, aber dies ist eine Lösung für mein Problem, also poste ich es auch:

MarkerClusterer.prototype.remove = function () {}

[..]

cluster.set("map", HIDDEN_MAP); // den Clusterer entfernen
cluster.resetViewport();
cluster.redraw();