Google MarkerClusterer: маркеры с разделителями ниже определенного уровня масштабирования?

Я использую Google MarkerClusterer. Я хотел бы удалить все маркеры всякий раз, когда карта выходит за пределы уровня масштабирования 15.

В параметрах конфигурации есть параметр maxZoom, но документация не дает понять, что именно предполагается делать.

Я попытался установить его следующим образом, но карта остается кластеризованной независимо от уровня масштабирования. Я установил карту:

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

Я делаю что-то неправильно, не понял ли я, что этот вариант должен делать, или есть ли другой способ исправить это?

Ответ 1

Настройка уровня maxZoom на в этом примере, объявляет все маркеры для уровня масштабирования 8 и выше.

Воспроизведение:

  • установить максимальный уровень масштабирования до 7
  • нажмите обновить карту
  • измените уровень масштабирования на 0 (самый дальний)
  • нажмите кнопку "+" на слайдере масштабирования 8 раз.

Документация для MarkerClustererPlus немного понятна:

maxZoom | номер | Максимальный уровень масштабирования, при котором кластеризация включена или равна нулю, если кластер будет включен на всех уровнях масштабирования. Значение по умолчанию равно 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>

Ответ 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 

Ответ 3

Вы всегда можете использовать другой код, например, объединить

  • map.getZoom(),
  • marker [i].setVisible(true) (или false) и
  • google.maps.event.addListener(карта, '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-ключ. Я был вынужден сделать это вчера/сегодня.