google-maps - Google MarkerClusterer：在某个缩放级别以下去簇标记？

Question

我正在使用 Google MarkerClusterer。每当地图超过缩放级别 15 时，我想对所有标记进行去簇处理。

配置选项中有一个maxZoom设置，但是文档并没有明确说明它应该做什么。

我尝试将其设置如下，但无论我将地图设置为何种缩放级别，地图都会保持聚集：

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

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

score 22 · Accepted Answer

在此示例中设置 maxZoom 级别，将所有缩放级别 8 及以上的标记分簇。

（具有有效密钥的示例的工作版本， github中的原始示例来自需要密钥之前）

重现：

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

MarkerClustererPlus的文档更清晰一些：

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

代码片段：

var styles = [
  [{
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/people35.png',
    height: 35,
    width: 35,
    anchor: [16, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/people45.png',
    height: 45,
    width: 45,
    anchor: [24, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/people55.png',
    height: 55,
    width: 55,
    anchor: [32, 0],
    textColor: '#ffffff',
    textSize: 12
  }],
  [{
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/conv30.png',
    height: 27,
    width: 30,
    anchor: [3, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/conv40.png',
    height: 36,
    width: 40,
    anchor: [6, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/conv50.png',
    width: 50,
    height: 45,
    anchor: [8, 0],
    textSize: 12
  }],
  [{
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/heart30.png',
    height: 26,
    width: 30,
    anchor: [4, 0],
    textColor: '#ff00ff',
    textSize: 10
  }, {
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/heart40.png',
    height: 35,
    width: 40,
    anchor: [8, 0],
    textColor: '#ff0000',
    textSize: 11
  }, {
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/heart50.png',
    width: 50,
    height: 44,
    anchor: [12, 0],
    textSize: 12
  }],
  [{
    url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/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(data) {
  if (markerClusterer) {
    markerClusterer.clearMarkers();
  }

  var markers = [];

  var markerImage = new google.maps.MarkerImage(imageUrl,
    new google.maps.Size(24, 32));

  for (var i = 0; i < data.photos.length; ++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://developers.google.com/maps/documentation/javascript/examples/markerclusterer/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);

  $.getJSON("https://api.myjson.com/bins/6ad78", function(data, textStatus, jqXHR) {
    console.log(textStatus);
    refreshMap(data);
  });
}

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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<!-- scr -- ipt src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></scr -- ipt -->
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.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>

score 11 · Accepted Answer

 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

score 0 · Accepted Answer

您总是可以编写不同的代码，例如结合

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

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

在此示例中，缩放范围被单独分配给每个标记，但可以使用二维数组并为整个集群获得 markerVisible。

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

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

google-maps - Google MarkerClusterer：在某个缩放级别以下去簇标记？

3 回答 3

Related

Reference