Открывать всплывающее окно при нажатии на маркер

Question

У меня есть этот код:

popupIsOpen = false;
const marker: Marker = this.map.addMarkerSync(markerData);
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(this.markerClick);

markerClick(params: any) {
        this.popupIsOpen = !this.popupIsOpen;
        const marker: Marker = params[1] as Marker;
}

Шаблон:

<ion-content>
    <div id="map_canvas"></div>
</ion-content>
<div [ngClass]="{'overlay': popupIsOpen, 'hidden': !popupIsOpen}">
    <ion-card>
        <ion-card-content>
            <ion-button (click)="popupIsOpen=!popupIsOpen">close</ion-button>
             Content
        </ion-card-content>
    </ion-card>
</div>

Всплывающее окно не отображается, когда я нажимаю на маркер. Что я делаю не так? Спасибо заранее.

Answer 1

События API карты Google не обезьяны, пропатченные зоной. js и поэтому не запускаются в ngZone. Вы должны вручную повторно войти в зону, используя ngZone.run():

constructor(private ngZone: NgZone) {}

markerClick(params: Marker[]) {
  this.ngZone.run(() => {
    this.popupIsOpen = !this.popupIsOpen;
    const marker: Marker = params[1] as Marker;
  });
}

---

Также существует вероятность, что вы теряете контекст this, поскольку вы не связываете события должным образом. Существует несколько вариантов, один из которых заключается в использовании функции привязки анонимной стрелки при привязке:

marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe((params) => this.markerClick(params));