单击标记时打开弹出窗口

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

google 地图 API 事件未被 zone.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));

单击标记时打开弹出窗口

Open popup when click on marker

angular

google-maps

ionic-framework

ionic3

ionic-native