Google MarkerClusterer：低于某个缩放级别的decluster标记？ [英] Google MarkerClusterer: decluster markers below a certain zoom level?

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

问题描述

我正在使用Google MarkerClusterer。我希望每当地图变得高于缩放级别15时将所有标记去掉。



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



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

  new_mc = new MarkerClusterer（map，newco_markers，{
 maxZoom：9 
}）;

我做错了什么，我误解了该选项应该做什么，还是有另一个如何解决这个问题？

解决方案

在这个例子，将所有缩放级别为8以上的标记进行分组。


$ b

重现：


  1. 将最大缩放级别设置为7

  2. 点击刷新地图

  3. 将缩放级别更改为0（最远）
  4. 点击+缩放滑块8次。

MarkerClustererPlus 更清晰一些：


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


代码片段：
$ b 

  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]，textC olor：'#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';函数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（标记）; } 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（地图，标记，{maxZoom：zoom，gridSize：size，styles：styles [style]，imagePath：'https://googlemaps.github.io/js-marker-clusterer/images/m'}） ;}函数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（刷新，'点击'，refreshMap）; var clear = document.getElementById（'clear'）; google.maps.event.addDomListener（清除，'点击'，clearClusters）; refreshMap（）;}函数clearClusters（e）{e.preventDefault（）; e.stopPropagation（）; （）;}}};}};}};}};}; css prettyprint-override>  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; {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> MarkerClusterer v3的示例< / h3>< div id =map-container> < div id =map>< / div>< / div>< div id =inline-actions> < span>最大缩放级别：< select id =zoom> < 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 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 class =item>群集样式：< select id =style> < option value = -  1>默认< / option> < option value =0>人物< / option> < option value =1>对话< / option> < option value =2> Heart< / option> < option value =3> Pin< / option> < /选择> < input id =refreshtype =buttonvalue =Refresh Mapclass =item/> < a href =＃id =clear>清除< / a> < / div>


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.

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://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>

这篇关于Google MarkerClusterer：低于某个缩放级别的decluster标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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