低于某个缩放级别的decluster标记

低于某个缩放级别的decluster标记

关注
发信
关注(28)粉丝(399)

Google MarkerClusterer：低于某个缩放级别的decluster标记？

本文介绍了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次。

更清晰一些：

代码片段：
$ 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   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:

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标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-06 07:19
Powered by LMLPHP ©2024 低于某个缩放级别的decluster标记 0.040691