多边形上的 GoogleMap 拖拽事件破坏了 Material Angular Snackbar

问题描述

在 GoogleMaps 侦听器中为多边形上的 dragend 使用小吃栏时，

let polygon = new google.maps.polygon({
  map: this.map.googleMap,paths: coords.map(c => ({
    lat: c.latitude,lng: c.longitude
  })),strokeColor: `#caa052`,strokeOpacity: 0.8,strokeWeight: 2,fillColor: `#ffffb1`,fillOpacity: 0.35,draggable: true
});
google.maps.event.addListener(polygon,"dragend",() => {
  this._snackBar.open("dragend");
});

snackbar 消息卡在左上角并且永远不会消失。

可以在 https://google-map-drag-breaks-snackbar.stackblitz.io/ 找到工作示例。代码可以在 https://stackblitz.com/edit/google-map-drag-breaks-snackbar?file=src%2Fapp%2Fsnack-bar-overview-example.ts 找到。

有什么办法可以解决这个问题吗？

解决方法

需要使用 NgZone.run，因为我没有使用 map-polygon 绑定。

constructor(private _snackBar: MatSnackBar,private _ngZone: NgZone) {}

google.maps.event.addListener(polygon,"dragend",() => {
  this._ngZone.run(() => this._snackBar.open("dragend"));
});