angular - 传单 - 从单选按钮更改事件时重叠标记
问题描述
我目前正在研究一个带有传单的 ionic 4 和 angular 项目,用于在地图上显示天气预报。同时改变无线电组中的事件以改变地图上的天气,如风、雨等,我在地图上有重叠的标记。
gif图片
如何在更改数据以显示新数据时清除所有标记?
代码
leafletMap() {
// In setView add latLng and zoom
this.map = new Map('mapId').setView([33, 44], 6);
tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
minZoom: 5,
maxZoom: 6
}).addTo(this.map);
this.getData(event)
}
// markers
async getData(event) {
console.log(event);
if (event.detail.value="weather") {
this.http.get("xxxxxxxx)
.subscribe(data => {
let f = data["vt1observation"]
new L.Marker([this.cities.duhok.lat, this.cities.duhok.lng], {
icon: new L.DivIcon({
className: 'my-div-icon',
html: `<div style="width: 45px";>
<img src="assets/icon/${f.icon}.png"/ style="width:20px;">
<span style="color:white">${f.temperature}C</span></div>`
})
}).addTo(this.map);
})
} else if (event.detail.value="wind") {
this.http.get("xxxxxxxx)
.subscribe(data => {
let f = data["vt1observation"]
new L.Marker([this.cities.duhok.lat, this.cities.duhok.lng], {
icon: new L.DivIcon({
className: 'my-div-icon',
html: `<div style="width: 45px";>
<img src="assets/icon/${f.icon}.png"/ style="width:20px;">
<span style="color:white">${f.wind}</span></div>`
})
}).addTo(this.map);
})
html
<ion-item>
<ion-label>forecast</ion-label>
<ion-radio slot="start" value="weather" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label>wind</ion-label>
<ion-radio slot="start" value="wind" ></ion-radio>
</ion-item>
<ion-item>
<ion-label>humd</ion-label>
<ion-radio slot="start" value="h"></ion-radio>
</ion-item>
<ion-item>
<ion-label>rain</ion-label>
<ion-radio slot="start" value="rain"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
解决方案
您可以在单独的图层上添加标记,将标记添加到layerGroup并将 layerGroup添加到地图,而不是直接在地图上添加所有标记。您可以使用 clearLayers() 方法删除标记。
var markers = L.layerGroup([marker1, marker2]).addTo(map);
markers.clearLayers();
推荐阅读
- python - 配置 matplotlib 颜色条以匹配 3D 表面值
- vba - 如何使代码与在 access 2016 中编写的 access 2010 兼容。收到错误“找不到库”
- ajax - codeigniter ajax 将数据发布到控制器导出 csv
- node.js - TypeError: result[0].data 不是函数
- node.js - 我的错误是:错误 [ERR_HTTP_HEADERS_SENT]:在将标头发送到客户端后无法设置标头
- asp.net - 从 asp.net core2 应用程序中的动态 JSON 结构方案中获取键值
- html - 如何在引导程序中删除垂直空格行
- r - 绘制 mtry 和 n_tree 值以及准确性
- angular - 将 T1 类型的数组映射到 T2 类型的数组
- list - 如何在序言中将'Saya'翻译成'I'和'saya'翻译成'i'