我正在开展一个小型项目,我想使用Google Maps JS API(当前版本)。前端在Angular 5上,带有Typescript。问题是,当用户点击地图上的任何位置时,我想在地图上显示模态窗口。我设法触发模态打开没有任何问题,虽然模态动画不起作用,DatePicker没有渲染,我也不能通过点击按钮关闭它。在调整浏览器窗口大小后,似乎将其状态更改为半工作状态,例如,当我点击“关闭”状态时。按钮,然后调整浏览器窗口的大小,它正确关闭。我正在使用角度材料模态。在应用程序的其他地方,模态工作得很好。加载地图后,它也会更改与之无关的顶级菜单样式。 我已经尝试以编程方式调用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
答案 0 :(得分:4)
好的,我找到了答案。由于Google Map触发的事件超出了Angular的背景,因此会导致这种奇怪的行为 我所要做的就是在NgZone.run方法中调用模态的开头 因此,当在地图上订阅点击事件时,我的代码如下所示:
operator new()
我不得不在地图的组件构造函数中注入NgZone。