Google Maps V3でMarkerClusterを表示/非表示にする方法は？

Question

異なるマーカーが異なる必要があります mapTypes、そして私はそれらをaに押し付けています MarkerClusterer.

マーカーを次のように「非表示」します。

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

そして、それらを「見せて」：

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

問題は、MarkerClustererが好きではないように見えることです set("map", null);エラーがスローされます TypeError: Object #<a MarkerClusterer> has no method 'remove'. 。適切な方法でそれらを表示/非表示にするにはどうすればよいですか？

Answer 1

私は少し猿のパッチと少しハックによってこれを解決するために私の道を戦いました。私はまだきれいな答えを待っていますが、これ は 私の問題の解決策なので、これも投稿しています。

MarkerClusterer.prototype.remove = function () {}

[..]

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

Answer 2

クラスターをクリアするエレガントな方法

cluster.clearMarkers();

Answer 3

JavaScript API V3では、次のように言うだけで十分です。

clusterer.setMap(null);

マップを既存のマップオブジェクトに戻すと、クラスターが再表示されます。

clusterer.setMap( this.map );

また、私はあなたの例のように、あなたのクラスターの「クラスター」という名前を付けないことをお勧めします。 MarkerClustererにはクラスターオブジェクトが含まれています。クラスターオブジェクトは、クラスター自体ではなく実際のクラスターマーカーです。

Answer 4

これがより完全な解決策です：

in .html add：

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

.js add：

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 5

マップ上にクラスターを簡単に表示/非表示にするための私のコードです（Maps APIおよびJS-Clusterレンダラーの現在のバージョンに更新されます）。ガビに感謝します。

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