Question

我正在尝试使用angular2-google-maps项目获取我的Google地图模式。

我看到当你想把地图放在一个模态中时，你必须触发调整大小事件才能使其工作。但现在我的问题是地图的位置：我不能把它放在最初的坐标上。

这是我的档案：

Google地图容器组件

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

我注意到，当触发调整大小时，我的初始坐标会在我从未进入的坐标中发生变化......

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

Answer 1

如果您使用：

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

您在“then”调用中设置的坐标将在地图调整大小后发生。

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

angular2-google-maps模态问题

1 个答案: