在"带传单的角度"中隐藏缩小标记

Question

缩小时我想隐藏标记。我单击以在地图上添加标记，如果缩放，则标记不会隐藏。

如果我在console.log中查看，标记是未定义的。

ngOnInit() {
var map = L.map("map").setView([this.latitude, this.longitude], this.zoom);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
map.on('zoomend',function(e){
console.log(map.getZoom());
if (map.getZoom()>13) {
if(this.saveLat !== undefined) {
this.marker = L.marker([this.saveLat, this.saveLon], this.markerIcon).addTo(map);
}
}else {
console.log(this.marker);
if(this.marker !== undefined) {
this.marker.remove();
}
}
});
map.on("click", e => {
console.log(e.latlng); // get the coordinates
if(this.marker !== undefined) {
this.marker.remove()
console.log(this.marker);
}
this.marker = L.marker([e.latlng.lat, e.latlng.lng], this.markerIcon).on('click', this.markerOnClick).addTo(map); // add the marker onclick
console.log(this.marker);
this.saveLat = e.latlng.lat;
this.saveLon = e.latlng.lng;
console.log(this.saveLat);
});
}

Answer 1

创建一个layerGroup，在组上添加标记，并在每次点击地图时在地图上跟随。缩小时，通过调用clearLayers方法将它们从地图中删除。

map;
layerGroup: L.LayerGroup = L.layerGroup();
ngOnInit() {
this.map = L.map("map").setView([51.505, -0.09], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
this.map.on("click", (e: any) => {
const {
latlng: { lat, lng }
} = e;
const marker = L.marker([lat, lng], { icon });
this.layerGroup.addLayer(marker).addTo(this.map);
});
this.map.on("zoomend", (e: Event) => {
// clear the markers here
this.layerGroup.clearLayers();
});
}

演示