问题描述
下面是我的代码,用于初始化地图并添加聚类和标记。一切工作正常,但是标记单击的行为很奇怪,就像事件立即被触发并点击API一样,但是全局变量在几秒钟后,几分钟后就会更新。
renderMap() {
window['initMap'] = () => {
this.loadMap();
};
if (!window.document.getElementById('google-map-script')) {
const s = window.document.createElement('script');
s.id = 'google-map-script';
s.type = 'text/javascript';
s.src = 'https://maps.googleapis.com/maps/api/js?key=' + environment.GOOGLE_MAP_API_KEY + '&callback=initMap';
window.document.body.appendChild(s);
} else {
this.loadMap();
}
}
loadMap() {
const map = new window['google'].maps.Map(this.mapElement.nativeElement,{
center: {lat: this.center.lat,lng: this.center.lng},zoom: this.zoom
});
const markers = this.markers.map((location,i) => {
const marker = new google.maps.Marker({
position: {lat: location.lat,lng: location.lng},label: location.label,icon: 'assets/img/marker_.png',title: location.title,clickable: true
});
marker.addListener('click',() => {
const m = location;
this.customer = m;
this.showLocation = true;
this.loading = true;
this.center = {
lat: m.lat,lng: m.lng
};
this.companyService.company(m.company_id).subscribe((company: any) => {
this.company = company;
this.loading = false;
},error => {
this.loading = false;
console.log(error);
});
});
return marker;
});
const markerCluster = new MarkerClusterer(map,markers,{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
ngOnInt(){
this.renderMao();
}
解决方法
您可能需要在NgZone中运行click
回调
constructor(private zone: NgZone)
marker.addListener('click',() => {
this.zone.run(() => {
...
});