javascript - 从 map 中删除所有标记

Question

我正在从 Algolia 获取数据，并有一张 map 显示当用户搜索结果更新时使用 Leaflet 的结果， map 也是如此，但标记没有被删除，因此更多标记被添加到页面。

我假设 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 标记集群组管理的。后者自行处理标记的添加和删除。因此，集群标记已经从您的 map 中删除，您的 marker.remove() 将不执行任何操作，或者暂时从 map 中删除标记，直到 clusters 将其添加回来。

如果 markers 有 clusters 中的 sams 标记列表，那么只需使用后者即可:

• clusters.clearLayers() 去除所有标记。
• clusters.getBounds() 使您的 map 适合您的标记范围。