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

你的“然后”呼内设置地图大小调整之后会出现的坐标。

我遇到了同样的问题，它为我工作。