angular2-google-maps模式問題

Question

我試圖讓我的谷歌地圖模式與angular2-google-maps項​​目一起工作。

我看到，當你想在模態中放置一個地圖時，你必須觸發resize事件才能進行工作。但現在我的問題是地圖的位置：我不能將它集中在最初的座標上。

這裏我的文件：

谷歌地圖容器組件

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

谷歌地圖的包裝部件

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

你的「然後」呼內設置地圖大小調整之後會出現的座標。

我遇到了同樣的問題，它爲我工作。