我想从地图中删除所有标记,并尝试使用map.remove
删除标记我使用vue.js与传单显示地图我有一个对象来记录LNG和late
router_planning: [
{
car: [
{
name: "001",
lat: 25.042474,
lng: 121.513729,
},
{
name: "002",
lat: 24.982474,
lng: 121.613729,
},
{
name: "003",
lat: 24.894474,
lng: 121.623729,
},
],
},
{
car: [
{
name: "004",
lat: 24.982474,
lng: 121.513729,
},
{
name: "005",
lat: 24.882474,
lng: 121.513729,
},
{
name: "006",
lat: 24.982474,
lng: 121.713729,
},
],
},
],
和下面的两个函数Initmap()//设置视图
initmap() {
this.mapp = L.map("map");
this.mapp.setView(
[
this.router_planning[0].car[0].lat,
this.router_planning[0].car[0].lng,
],
10
);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 13,
minZoom: 9,
}).addTo(this.mapp);
},
make_map()//给出映射标记
make_map() {
for (let i = 0; i < this.router_planning.length; i++) {
for (let j = 0; j < this.router_planning[i].car.length; j++) {
L.circleMarker(
[
this.router_planning[i].car[j].lat,
this.router_planning[i].car[j].lng,
],
{
color: this.circle_marker[i],
fillColor: this.circle_marker[i],
fillOpacity: 1,
radius: (i + 1) ** 2,
}
)
.addTo(this.mapp)
.bindTooltip(this.router_planning[i].car[j].name.toString(), {
permanent: true,
});
}
},
我的网页应该这样工作首先initmap(),然后make_map()
我有一个按钮来触发make_map()改变lat和lng
但旧标记没有消失
i have try add
this.mapp.remove()到make_map()的顶部
i got error message
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'appendChild')
我已经尝试将这个添加到make_map的顶部,没有错误
但没有清除标记
var container = L.DomUtil.get('map');
container._leaflet_id = null;
我看了很多文章来清除地图,但仍然没有工作我真想知道为什么不能清除或删除map
谢谢
要从地图上删除所有标记,您必须首先将它们存储在某个地方。
你可以将所有的标记存储在一个数组中:
const markers = [];
const marker = L.circleMarker([...])
.bindTooltip([...])
.addTo(map);
markers.push(marker);
要删除它们,你需要调用:
for(let i = 0; i < markers.length; i++) {
map.removeLayer(marker[i]);
}
示例: 如果你不需要删除特定的标记,有一个更好的方法来做到这一点,使用
LayerGroup()
。const layerGroup = new L.LayerGroup();
const marker = new L.marker([...]).addTo(layerGroup);
//after you've added all markers to layerGroup():
map.addLayer(layerGroup)
和删除所有标记只需调用:map.removeLayer(layerGroup)