代码之家 › 专栏 › 技术社区 › Gabi Purcaru BornCoder

如何在google maps v3中显示/隐藏MarkerCluster?

markerclusterer google-maps-api-3 javascript

5

Gabi Purcaru BornCoder · 技术社区 · 15 年前

mapType s、我把他们推到 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' . 我怎样才能正确地显示/隐藏它们?

5 回复 | 直到 15 年前

1

7

code-jaff 13 年前

清除集群的优雅方法

cluster.clearMarkers();

2

6

Micros 14 年前

在Javascript API v3中,可以说:

clusterer.setMap(null);

如果将映射设置回现有的MAP对象,则群集将再次出现。

clusterer.setMap( this.map );

另外,我建议不要像您的示例中那样将集群命名为“cluster”。MarkerClusterer包含群集对象,这些对象是实际的群集标记,而不是群集程序本身。

3

2

Maurix 12 年前

下面是一个更完整的解决方案:

<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;
 };

4

1

Bo. 9 年前

下面是我的代码,可以轻松地在地图上显示/隐藏集群(针对当前版本的Maps API和JS集群渲染器进行了更新)。谢谢加比。

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

5

0

Gabi Purcaru BornCoder 15 年前

我费了好大劲才解决了这个问题。我还在等一个明确的答案,但是一个解决我问题的方法,所以我也发布了这个:

MarkerClusterer.prototype.remove = function () {}

[..]

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