javascript - 从地图中删除所有标记
问题描述
我正在从 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();
解决方案
问题是您的markers
阵列中的传单标记实际上是由您的clusters
标记集群组管理的。后者自行处理标记的添加和删除。因此,集群标记已从您的地图中删除,您marker.remove()
将什么也不做,或者暂时从地图中删除标记,直到clusters
将其添加回来。
如果markers
在 中具有标记的 sams 列表clusters
,则只需使用后者:
clusters.clearLayers()
摆脱所有标记。clusters.getBounds()
使您的地图适合您的标记范围。
推荐阅读
- javascript - Javascript从字符串中删除最后一次出现的子字符串
- apache-kafka - 在使用 @KafkaListener 注释的方法上使用断点时,会发生 Kafka CommitFailedException
- python - Pandas 在枢轴操作后用零替换 NaN 值
- python - 比较连续行并根据条件删除
- spring-boot - 无法在同一个 Spring Boot 应用程序中产生和消费来自 Kafka 的事件
- sql - 在 Postgres 中按“即时”计算分组
- swift - PHPickerViewController 隐藏搜索栏和导航栏
- robotframework - 将 Robotframework 关键字和页面对象结合起来是好还是坏?
- python - 获取非 NaN 值的列名作为新列
- php - Laravel 编辑浅层嵌套资源