Come mostrare / nascondere un MarkerCluster in Google Maps v3?

Question

Ho bisogno di avere marcatori diversi per i diversi mapTypes, e io li sto spingendo a un MarkerClusterer .

I "nascondere" i marcatori con:

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

e "Mostra" loro con:

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

Il problema è che MarkerClusterer sembra non come set("map", null); getta la TypeError: Object #<a MarkerClusterer> has no method 'remove' errore. Come posso mostrare / nascondere loro il modo corretto?

Answer 1

Ho combattuto la mia strada in soluzione di questo da un po 'e un po' monkeypatching hack. Sto ancora aspettando una risposta pulita, ma questo è di una soluzione al mio problema, quindi sono anche questo distacco:

MarkerClusterer.prototype.remove = function () {}

[..]

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

Answer 2

modo elegante per cancellare il cluster

cluster.clearMarkers();

Answer 3

Nel API v3 Javascript è sufficiente dire:

clusterer.setMap(null);

Se si imposta la mappa alla oggetto della mappa esistente, i cluster riappariranno.

clusterer.setMap( this.map );

Inoltre, vorrei suggerire di non assegnare un nome al 'gruppo' Clusterer, come nel tuo esempio. Il MarkerClusterer contiene oggetti cluster, che sono i marcatori effettivi cluster e non il ClusterER stessa.

Answer 4

Ecco una soluzione più completa:

in .html add:

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

in .js aggiungere:

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

per mostrare i cluster:

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

per nascondere i cluster:

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

Infine, avevo bisogno di patch seguente per 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;
 };

Spero che questo aiuti

Answer 5

Ecco il mio codice per mostrare facilmente / nascondere cluster sulla mappa (aggiornato per le versioni attuali di Maps API e JS-Cluster-rendering). Grazie 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();