![](/img/trans.png)
[英]how to add Dragable marker for Angular2-google-maps in ionic application
[英]angular2-google-maps Modal issue
我正在嘗試使用angular2-google-maps項目獲取我的Google地圖模式。
我看到當你想要在一個模態中放置一個地圖時,你必須觸發resize事件才能使其工作。 但現在我的問題是地圖的位置:我不能把它放在最初的坐標上。
在這里我的文件:
Google Maps容器組件
@Component({
selector: 'schools-modal',
templateUrl: 'schools-modal.component.html',
})
export class SchoolsModalComponent implements OnInit{
@ViewChild(GoogleMapComponent)googleMapComponent: GoogleMapComponent;
private certificate: Certificate;
private point: GraphPoint;
private schools_list: School[];
constructor(private rootNode: ElementRef,
private certificates: CertificatesStore,
private points: GraphPointsStore,
private schools: SchoolsStore,
private events: EventsStore) {
this.events.openSchoolsModal.subscribe(() => {
this.show();
});
this.points.current.subscribe(point => {
this.point = point;
});
this.certificates.current.subscribe(certificate => {
this.certificate = certificate;
if (certificate) {
this.certificates
.getSchoolsIdsFor(certificate)
.subscribe(ids => {
this.schools_list = this.schools.getByIdList(ids);
});
}
});
}
ngOnInit() {
$(this.rootNode.nativeElement).on('shown.bs.modal', () => {
this.googleMapComponent.resize();
$(this).off();
});
}
initMapMakers(): any {
return this.schools_list.reduce((all, item:School, index) => {
all.push({
id: index ,
latitude: item.latitude,
longitude: item.longitude
});
return all;
}, []);
}
show(): void {
$(this.rootNode.nativeElement).modal('show');
}
Google Maps Wrapper組件
@Component({
selector: 'google-map',
templateUrl: 'google-map.component.html'
})
export class GoogleMapComponent implements OnInit {
@ViewChild(SebmGoogleMap) sebmGoogleMap: SebmGoogleMap;
private readonly DEFAULT_VALUES: any = {
zoom: 5,
lat: 46.227638,
lng: 2.213749,
};
private zoom: number;
private lat: number;
private lng: number;
constructor() {
this.reset();
}
ngOnInit() {
this.sebmGoogleMap.centerChange.subscribe((obj) => {
console.log(obj.lat);
console.log(obj.lng);
})
}
reset() {
this.zoom = this.DEFAULT_VALUES.zoom;
this.lat = this.DEFAULT_VALUES.lat;
this.lng = this.DEFAULT_VALUES.lng;
}
resize(): void {
this.sebmGoogleMap.triggerResize();
}
}
我注意到,當觸發調整大小時,我的初始坐標會在我從未進入的坐標中改變...
任何幫助,將不勝感激 ! 謝謝 !
如果您使用:
this.sebmGoogleMap.triggerResize().then(res => {
(set coordinates here)
});
在地圖調整大小后,您將在“then”調用中設置的坐標將發生。
我遇到過同樣的問題,對我有用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.