google-maps - Polygon 上的 GoogleMap dragend 事件会破坏 Material Angular Snackbar

Question

dragend在多边形上使用 GoogleMaps 侦听器中的快餐栏时，

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");
});

小吃店消息卡在左上角并且永远不会消失。

可以在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找到。

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

标签： google-mapsangular-materialangular-google-maps

Answer 1

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

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

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