我想從地圖中洗掉所有標記，并嘗試使用 map.remove 洗掉標記
我正在使用帶有傳單的 vue.js 來顯示地圖我有一個物件來記錄 lng 和 lat
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
但舊標記并沒有消失
我試過添加
this.mapp.remove() 到 make_map() 的頂部
我收到錯誤訊息
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'appendChild')
我已經嘗試將其添加到 make_map 的頂部而沒有錯誤
但沒有清除標記
var container = L.DomUtil.get('map');
container._leaflet_id = null;
我看過很多文章來清除地圖，但仍然沒有用，這讓我瘋狂地找出為什么我無法清除或洗掉地圖
多謝
uj5u.com熱心網友回復：
要從地圖中洗掉所有標記，您必須首先將它們存盤在某個地方。
您可以將所有標記存盤在陣列中：
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)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/473219.html
標籤：javascript Vue.js 字典 网络 传单