Удалить все маркеры с карты - PullRequest
Новая
       24

Удалить все маркеры с карты

0 голосов
/ 11 октября 2018

Я получаю данные из Алголии, и у меня есть карта, показывающая результаты с использованием Leaflet, когда пользователь ищет обновление результатов, карта тоже делает это, но маркеры не удаляются, и поэтому на страницу добавляется больше маркеров.

Я предполагал, что markers.forEach(marker => marker.remove()); удалит мои маркеры, но это не так.

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    images: {

    },
    templates: {
      item: document.getElementById('hit-template').innerHTML,
      empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
    },
    transformItems: function(items) {
      renderMap(items);
      return items.slice(0, curentResultsPerPage);
    },
  })
);

const map = L.map(
  'mapid', {
    renderer: L.canvas(),
    zoom: 18,
    keepInView: true,
    dragging: !L.Browser.mobile,
  }
).setMaxZoom(18).setMinZoom(2);

L.mapboxGL({
  attribution: '<a href="https://www.maptiler.com/license/maps/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
  accessToken: 'not-needed',
  style: 'https://maps.tilehosting.com/c/acad0958-1cbc-46ac-a497-681525e8ca19/styles/streets/style.json?key=iVyYurApGpcJs6fpSZIZ',  
}).addTo(map);

let markers = [];

function renderMap(items) {

  // remove current markers
  markers.forEach(marker => marker.remove());
  // clear the markers
  markers = [];

  // create cluster group
  var clusters = L.markerClusterGroup({ 
    chunkedLoading: true,
    showCoverageOnHover: false,
  });

  // iterate through search results
  for (var i = 0; i < items.length; i++) {
    // get result
    var item = items[i];
    var geo = item._geoloc;
    // create marker
    var marker = L.marker([geo.lat, geo.lng], {icon: myIcon});

    // create marker popup
    marker.bindPopup(item.title);

    // add the marker to the markers array
    markers.push(marker);

    // add the marker to the cluster group
    clusters.addLayer(marker);
  }

  // add the cluster group to the map
  map.addLayer(clusters);

  if (markers.length) {
    map.fitBounds(L.featureGroup(markers).getBounds());
  }
}

search.start();

1 Ответ

0 голосов
/ 12 октября 2018

Проблема в том, что маркерами листовок в вашем массиве markers фактически управляет ваша группа кластеров маркеров clusters.Последний обрабатывает добавление и удаление ваших маркеров самостоятельно.Поэтому кластерные маркеры уже удалены с вашей карты, и ваш marker.remove() ничего не будет делать или временно удалит маркер с карты, пока clusters не добавит его обратно.

Если markers имеет список сэмпловМаркеры, как в clusters, затем просто используйте последние вместо:

  • clusters.clearLayers(), чтобы избавиться от всех маркеров.
  • clusters.getBounds(), чтобы соответствовать вашей карте в пределахваши маркеры.
...