В настоящее время я работаю над ионным 4 и угловым проектом с листовкой для прогноза погоды отображения на карте.Я хочу получить выбранное значение радиокнопки на событии (ionChange) в радиогруппе, чтобы изменить погоду на карте, например, ветер, дождь .. и т. Д.
Проблема в том, что когда я нажимаю на любое радио, событие не меняется, и я получаю слишком много данных на карте.Я хочу сделать, когда пользователь нажимает на любую опцию удалить все маркеры и показывает другие маркеры.
Короткий код
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);
})
}
console.log (событие);
HTML
<ion-list>
<ion-radio-group (ionSelect)="getData($event)" [(ngModel)]="datails">
<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>