时间戳

首页 > 解决方案 > 单击标记时打开弹出窗口

angular - 单击标记时打开弹出窗口

问题描述

我有这个代码：

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>

单击标记时不显示弹出窗口。我做错了什么？提前谢谢。

标签： angulargoogle-mapsionic-frameworkionic3ionic-native

解决方案

谷歌地图 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));

推荐阅读