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

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

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

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

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

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


google-maps google-maps-api-3 markerclusterer
person Richard    schedule 07.03.2013    source источник

Ответы (2)


arrow_upward
21
arrow_downward

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

(рабочая версия примера с действительным ключом, исходный пример в github был до того, как ключ потребовался)

Чтобы воспроизвести:

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

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

максимальное увеличение | номер | Максимальный уровень масштабирования, при котором включена кластеризация, или null, если кластеризация должна быть включена на всех уровнях масштабирования. Значение по умолчанию равно нулю.

фрагмент кода:

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

person geocodezip    schedule 07.03.2013

arrow_upward
0
arrow_downward

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

  • карта.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. Я был вынужден сделать это вчера/сегодня.

person darekk    schedule 12.05.2016