#angular #google-maps #google-maps-api-3 #google-maps-markers
#angular #google-карты #google-maps-api-3 #google-карты-маркеры
Вопрос:
Ниже приведен мой код для инициализации карты и добавления кластера и маркеров. все работает нормально, но нажатие маркера ведет себя странно, как будто событие запускается мгновенно и также попадает в 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 'amp;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();
}
Ответ №1:
Вероятно, вам нужно выполнить click
обратный вызов в NgZone
constructor(private zone: NgZone)
marker.addListener('click', () => {
this.zone.run(() => {
...
});