angular2-google-mapsモーダルの問題

Question

私はGoogle Mapsのモーダルな作業をangular2-google-mapsプロジェクトで手に入れようとしています。

私は、モーダルにマップを配置するときに、作業を行うためにサイズ変更イベントをトリガーする必要があることを知りました。しかし、今私の問題は、地図の位置です：私は最初の指輪の中心にすることはできません。

ここに私のファイル：

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マップラッパーコンポーネント

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

あなたはマップのサイズが変更後に発生します「そして、」コール内で設定された座標。

私はこの同じ問題に遭遇し、それは私のために働いた。