簡體   English   中英

angular2-google-maps模態問題

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM