Question

我从Algolia获取数据，并且有一张地图，当用户搜索结果更新时使用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();

Answer 1

问题是markers数组中的传单标记实际上是由clusters标记群集组管理的。后者自行处理您的标记的添加和删除。因此，群集标记已从您的地图中删除，您的marker.remove()将不执行任何操作，或暂时从地图中删除该标记，直到clusters将其重新添加。

如果markers的标记列表为clusters，则只需使用后者：

clusters.clearLayers()删除所有标记。
clusters.getBounds()使地图适合您的标记范围。

从地图上删除所有标记

1 个答案: