在谷歌地图上显示模态 - Angular 5答案

【问题标题】：Showing modal over google map - Angular 5在谷歌地图上显示模态 - Angular 5
【发布时间】：2018-03-29 09:52:14
【问题描述】：

我正在做一个小项目，我想在其中使用 Google Maps JS API（当前版本）。前端是在带有 Typescript 的 Angular 5 上。问题是当用户单击地图上的任意位置时，我想在地图上显示一个模式窗口。我设法触发模态打开没有任何问题，虽然模态上的动画不起作用，DatePicker 没有呈现，我也不能通过单击按钮关闭它。在调整浏览器窗口大小后，它似乎将其状态更改为半工作状态，例如，当我单击“关闭”按钮然后调整浏览器窗口大小时，它会正确关闭。我正在使用角度材料模态。在应用程序的其他地方，模式工作得很好。同样在加载地图后，它会更改不相关的顶部菜单样式。我试图以编程方式调用 map 的 resize 事件，但它没有改变任何东西。 map.component.ts 的代码：

import { Component, Inject, ElementRef, ViewChild, OnInit } from     
'@angular/core';
import { MatDialog } from '@angular/material';
import { MeetingDialogComponent } from '../meeting-dialog/meeting-dialog.component';

declare const google: any;

@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
    constructor(public dialog: MatDialog, private router: Router) {
    }

    @ViewChild('mapDiv') mapDiv: ElementRef;
    public map: google.maps.Map;
    private markers: google.maps.Marker[] = [];
    private clickListener: google.maps.MapsEventListener;

    initMap() {
        this.map = new google.maps.Map(this.mapDiv.nativeElement, {
            center: { lat: 53.921, lng: 19.037 },
            zoom: 8,
            disableDefaultUI: true
        });
        this.clickListener = this.map.addListener('click', (event) => {
            this.addMarker(event.latLng);
        });
    }

    private addMarker(location) {
        let marker = new google.maps.Marker({
            position: location,
            map: this.map
        });
        this.markers.push(marker);
        this.showMeetingModal();
    }

    private showMeetingModal() {
        this.dialog.open(MeetingDialogComponent, {
        });
    }

    ngOnInit() {
        this.initMap();
    }
}

map.component.html 的代码：

<div #mapDiv id="map"></div>

我认为模态代码无关紧要，因为它在应用程序的其他地方也能正常工作。提前感谢您的宝贵时间！

编辑：这是 stackblitz 示例的链接！
https://stackblitz.com/edit/angular-ulwfo2

【问题讨论】：

你能发布stackblitz代码示例吗？
给你！ stackblitz.com/edit/angular-ulwfo2 如您所见，如果您在单击地图后调整编辑器内的窗口大小，则会启动模态动画等。

标签： angular google-maps typescript

【解决方案1】：

好的，我设法找到了答案。由于 Google Map 触发的事件在 Angular 的上下文之外，它们会导致这种奇怪的行为。
我所要做的就是在 NgZone.run 方法中调用 modal 的打开。
因此，当订阅地图上的点击事件时，我的代码如下所示：

this.map.addListener('click', (event) => {
    this.zone.run(() => {
      this.addMarker(event.latLng);
    });
  });

我不得不在地图的组件构造函数中注入 NgZone。

【讨论】：