javascript - angular2-google-maps 模态问题

Question

我正在尝试让我的 Google map 模式与 angular2-google-maps 项目一起工作。

我看到当您想将 map 放入模式中时，您必须触发调整大小事件才能正常工作。但现在我的问题是 map 的位置:我无法将其置于初始坐标的中心。

这里是我的文件:

Google map 容器组件

@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 map 包装器组件

@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();
    }
}

我注意到当调整大小被触发时，我的初始坐标被更改为我从未输入过的坐标...

任何帮助将不胜感激!谢谢!

Answer 1

如果你使用:

this.sebmGoogleMap.triggerResize().then(res => { 
   (set coordinates here) 
});

您在“then”调用中设置的坐标将在 map 调整大小后出现。

我遇到了同样的问题，它对我有用。