Google MarkerClusterer:在某个缩放级别以下对标记进行去簇? [英] Google MarkerClusterer: decluster markers below a certain zoom level?

查看：18
本文介绍了Google MarkerClusterer:在某个缩放级别以下对标记进行去簇?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

 new_mc = new MarkerClusterer(map, newco_markers, {最大变焦:9});

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

解决方案

在 本示例，对缩放级别 8 及以上的所有标记进行去簇.

(使用有效密钥的示例的工作版本，github中的原始示例来自之前的密钥是必需的)

重现:

  1. 将最大缩放级别设置为 7
  2. 点击刷新地图
  3. 将缩放级别更改为 0(最远)
  4. 点击+"在缩放滑块上 8 次.

MarkerClustererPlus 的文档是清晰一点:

<块引用>

maxZoom |数量 |启用聚类的最大缩放级别，如果要在所有缩放级别启用聚类，则为 null.默认值为空.

代码片段:

var 样式 = [[{url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/people35.png',身高:35，宽度:35，锚点:[16, 0],textColor: '#ff00ff',文字大小:10}, {url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/people45.png',身高:45，宽度:45，锚点:[24, 0]，textColor: '#ff0000',文字大小:11}, {url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/people55.png',身高:55，宽度:55，锚点:[32, 0],textColor: '#ffffff',文字大小:12}],[{url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/conv30.png',身高:27，宽度:30，锚点:[3, 0],textColor: '#ff00ff',文字大小:10}, {url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/conv40.png',身高:36，宽度:40，锚点:[6, 0]，textColor: '#ff0000',文字大小:11}, {url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/conv50.png',宽度:50，身高:45，锚点:[8, 0],文字大小:12}],[{url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/heart30.png',身高:26，宽度:30，锚点:[4, 0]，textColor: '#ff00ff',文字大小:10}, {url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/heart40.png',身高:35，宽度:40，锚点:[8, 0],textColor: '#ff0000',文字大小:11}, {url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/heart50.png',宽度:50，身高:44，锚点:[12, 0],文字大小:12}],[{url: 'https://cdn.jsdelivr.net/npm/marker-clusterer-plus@2.1.4/images/pin.png',身高:48，宽度:30，锚点:[-18, 0],textColor: '#ffffff',文字大小:10，iconAnchor: [15, 48]}]];var markerClusterer = null;无功映射 = 空；var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&'+'chco=FFFFFF,008CFF,000000&ext=.png';函数刷新映射(数据){如果(markerClusterer){markerClusterer.clearMarkers();}var 标记 = [];var markerImage = new google.maps.MarkerImage(imageUrl,新的 google.maps.Size(24, 32));for (var i = 0; i < data.photos.length; ++i) {var latLng = new google.maps.LatLng(data.photos[i].latitude,数据.照片[i].经度)var 标记 = 新的 google.maps.Marker({位置:纬度，可拖动:真实，图标:markerImage});标记.推(标记)；}var zoom = parseInt(document.getElementById('zoom').value, 10);var size = parseInt(document.getElementById('size').value, 10);var style = parseInt(document.getElementById('style').value, 10);缩放 = 缩放 === -1 ?空:缩放；大小 = 大小 === -1 ?空:大小；风格 = 风格 === -1 ?空:风格；标记簇=新的标记簇(地图，标记，{maxZoom:缩放，网格大小:大小，样式:样式[样式]，imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});}函数初始化(){map = new google.maps.Map(document.getElementById('map'), {缩放:2，中心:新的 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) {控制台日志(文本状态)；刷新地图(数据)；});}函数 clearClusters(e) {e.preventDefault();e.stopPropagation();markerClusterer.clearMarkers();}google.maps.event.addDomListener(window, 'load', initialize);

body {边距:0；填充:10px 20px 20px；字体系列:Arial；字体大小:16px；}#地图容器{填充:6px；边框宽度:1px；边框样式:实心；边框颜色:#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;宽度:800px；}#地图 {宽度:800px；高度:400px；}#动作{列表样式:无；填充:0；}#inline-actions {填充顶部:10px；}.物品 {左边距: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>MarkerClusterer v3的示例</h3><div id="地图容器"><div id="地图"></div>

<div id="inline-actions"><span>最大缩放级别:<select id="缩放"><option value="-1">默认</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></选择></span><span class="item">集群大小:<select id="size"><option value="-1">默认</option><option value="40">40</option><option value="50">50</option><option value="70">70</option><option value="80">80</option></选择></span><span class="item">集群样式:<选择id=样式"><option value="-1">默认</option><option value="0">人物</option><option value="1">对话</option><option value="2">Heart</option><option value="3">Pin</option></选择><input id="refresh" type="button" value="Refresh Map" class="item"/><a href="#" id="clear">清除</a>

I'm using Google MarkerClusterer. I'd like to decluster all the markers whenever the map goes above zoom level 15.

There is a maxZoom setting in the configuration options, but the documentation does not make it clear what it is supposed to do.

I have tried setting it as follows, but the map remains clustered whatever zoom level I set the map to:

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

Am I doing something wrong, have I misunderstood what the option is supposed to do, or is there another way to fix this?

解决方案

Setting the maxZoom level on this example, declusters all the markers for zoom level 8 and above.

(working version of example with valid key, original example in github is from before key was required)

To reproduce:

  1. set Max zoom level to 7
  2. click refresh map
  3. change the zoom level to 0 (the furthest out)
  4. click the "+" on the zoom slider 8 times.

The documentation for MarkerClustererPlus is a little clearer:

maxZoom | number | The maximum zoom level at which clustering is enabled or null if clustering is to be enabled at all zoom levels. The default value is null.

code snippet:

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>

这篇关于Google MarkerClusterer:在某个缩放级别以下对标记进行去簇?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆