单击标记时打开弹出窗口答案

【问题标题】：Open popup when click on marker单击标记时打开弹出窗口
【发布时间】：2020-06-03 14:59:52
【问题描述】：

我有这个代码：

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>

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

【问题讨论】：

控制台有错误吗？
不，但是如果我初始化popupIsOpen = true;，弹出窗口会显示在地图上，然后如果我点击标记，弹出窗口就会消失并且不再显示

标签： angular google-maps ionic-framework ionic3 ionic-native

【解决方案1】：

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

【讨论】：