Question

我正在使用Google MarkerClusterer。每当地图超过缩放级别15时，我想要去除所有标记。

配置选项中有maxZoom设置，但documentation does not make it clear what it is supposed to do。

我尝试过设置如下，但无论我将地图设置为缩放级别，地图都会保持群集状态：

    new_mc = new MarkerClusterer(map, newco_markers, {
      maxZoom: 9
    });

我做错了什么，我误解了该选项应该做什么，还是有其他方法可以解决这个问题？

Answer 1

在this example上设置maxZoom级别，对所有缩放级别为8及以上的标记进行分割。

重现：

将最大缩放级别设置为7
点击刷新地图
将缩放级别更改为0（最远）
单击缩放滑块上的“+”8次。

MarkerClustererPlus的文档更清晰一点：

maxZoom |号码|启用群集的最大缩放级别，如果要在所有缩放级别启用群集，则为null。默认值为null。

代码段

var styles = [
  [{
    url: 'https://googlemaps.github.io/js-marker-clusterer/images/people35.png',
    height: 35,
    width: 35,
    anchor: [16, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://googlemaps.github.io/js-marker-clusterer/images/people45.png',
    height: 45,
    width: 45,
    anchor: [24, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://googlemaps.github.io/js-marker-clusterer/images/people55.png',
    height: 55,
    width: 55,
    anchor: [32, 0],
    textColor: '#ffffff',
    textSize: 12
  }],
  [{
    url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv30.png',
    height: 27,
    width: 30,
    anchor: [3, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv40.png',
    height: 36,
    width: 40,
    anchor: [6, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://googlemaps.github.io/js-marker-clusterer/images/conv50.png',
    width: 50,
    height: 45,
    anchor: [8, 0],
    textSize: 12
  }],
  [{
    url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart30.png',
    height: 26,
    width: 30,
    anchor: [4, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart40.png',
    height: 35,
    width: 40,
    anchor: [8, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://googlemaps.github.io/js-marker-clusterer/images/heart50.png',
    width: 50,
    height: 44,
    anchor: [12, 0],
    textSize: 12
  }],
  [{
    url: 'https://googlemaps.github.io/js-marker-clusterer/images/pin.png',
    height: 48,
    width: 30,
    anchor: [-18, 0],
    textColor: '#ffffff',
    textSize: 10,
    iconAnchor: [15, 48]
  }]
];

var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
  'chco=FFFFFF,008CFF,000000&ext=.png';

function refreshMap() {
  if (markerClusterer) {
    markerClusterer.clearMarkers();
  }

  var markers = [];

  var markerImage = new google.maps.MarkerImage(imageUrl,
    new google.maps.Size(24, 32));

  for (var i = 0; i < 1000; ++i) {
    var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude)
    var marker = new google.maps.Marker({
      position: latLng,
      draggable: true,
      icon: markerImage
    });
    markers.push(marker);
  }

  var zoom = parseInt(document.getElementById('zoom').value, 10);
  var size = parseInt(document.getElementById('size').value, 10);
  var style = parseInt(document.getElementById('style').value, 10);
  zoom = zoom === -1 ? null : zoom;
  size = size === -1 ? null : size;
  style = style === -1 ? null : style;

  markerClusterer = new MarkerClusterer(map, markers, {
    maxZoom: zoom,
    gridSize: size,
    styles: styles[style],
    imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m'
  });
}

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(39.91, 116.38),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var refresh = document.getElementById('refresh');
  google.maps.event.addDomListener(refresh, 'click', refreshMap);

  var clear = document.getElementById('clear');
  google.maps.event.addDomListener(clear, 'click', clearClusters);

  refreshMap();
}

function clearClusters(e) {
  e.preventDefault();
  e.stopPropagation();
  markerClusterer.clearMarkers();
}

google.maps.event.addDomListener(window, 'load', initialize);

body {
  margin: 0;
  padding: 10px 20px 20px;
  font-family: Arial;
  font-size: 16px;
}
#map-container {
  padding: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #ccc #999 #ccc;
  -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
  width: 800px;
}
#map {
  width: 800px;
  height: 400px;
}
#actions {
  list-style: none;
  padding: 0;
}
#inline-actions {
  padding-top: 10px;
}
.item {
  margin-left: 20px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<h3>An example of MarkerClusterer v3</h3>
<div id="map-container">
  <div id="map"></div>
</div>
<div id="inline-actions">
  <span>Max zoom level:
        <select id="zoom">
          <option value="-1">Default</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
        </select>

      </span>
  <span class="item">Cluster size:
        <select id="size">
          <option value="-1">Default</option>
          <option value="40">40</option>
          <option value="50">50</option>
          <option value="70">70</option>
          <option value="80">80</option>
        </select>
      </span>
  <span class="item">Cluster style:
        <select id="style">
          <option value="-1">Default</option>
          <option value="0">People</option>
          <option value="1">Conversation</option>
          <option value="2">Heart</option>
          <option value="3">Pin</option>
       </select>
       <input id="refresh" type="button" value="Refresh Map" class="item"/>
       <a href="#" id="clear">Clear</a>
    </div>

Answer 2

 var markerClusterer = new MarkerClusterer(map, myMarkers, {
     maxZoom: 15,
     zoomOnClick: false
   });
//zoom 0 corresponds to a map of the Earth fully zoomed out, 20 is closeup
//markerCluster goes away after zoom 
//turn off zoom on click or spiderfy won't work

Answer 3

您可以随时使用不同的代码，例如合并

map.getZoom（），
marker [i] .setVisible（true）（或false）和
google.maps.event.addListener（map，'zoom_changed'，...

这样的事情：

function show_hide_markers(zoom) {
    var markerVisible;
    for (var i = 0; i < markers.length; i++) {
        if (zoom <= zoomRanges[i][1] && zoom >= zoomRanges[i][0] ) { 
             markerVisible = true
        } else markerVisible = false;

        if (markers[i].getVisible() != markersVisible) {
        markers[i].setVisible(markersVisible);}
    }
}

// ...

google.maps.event.addListener(map, 'zoom_changed', function () {
    show_hide_markers(map.getZoom());
});

首先创建标记数组。缩放级别范围可以保存在单独的数组中，以某种方式对应于markers数组中的索引（此处为zoomRanges）。也可以从用于创建标记数组的原始数组（列表）中获取缩放级别。

在此示例中，缩放范围分别指定给每个标记，但可以使用二维数组，并为整个聚类获取markerVisible。

如果标记数不是很高，那就足够了。可能会应用添加/删除culd而不是设置可见性。

与标记管理器不同（至少在最近的某些情况下），即使应用了API3 + API密钥，也可以使用它。我昨天/今天被迫这样做。

Google MarkerClusterer：在某个缩放级别以下的分簇标记？

3 个答案: