我想在 ng-bootstrap 模态中显示一个 ngx-leaflet 地图,以一个确定的点为中心。该地图被封装在一个组件中,如下所示:
HTML
<div class="modal-header">
<h4 class="modal-title">Map</h4>
<button type="button" class="close" aria-label="Close"
(click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="map"
leaflet
[leafletOptions]="options"
[leafletLayersControl]="layersControl"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
TS
constructor(public activeModal: NgbActiveModal) { }
ngOnInit() {
}
streetMap = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
hybridMap = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
vehicleMarker = L.marker([40.4168, -3.703790], {
icon: L.icon({
iconSize: [25, 41],
iconAnchor: [13, 41],
iconUrl: 'assets/marker-icon.png',
shadowUrl: 'assets/marker-shadow.png'
})
});
layersControl = {
baseLayers: {
'Map view': this.streetMap,
'Map hybrid': this.hybridMap
},
overlays: {
'Vehicle': this.vehicleMarker
}
};
options = {
layers: [this.streetMap, this.vehicleMarker],
zoom: 5,
center: L.latLng([40.4168, -3.703790])
};
在另一个组件中,我像这样打开模式:
constructor(private modalService: NgbModal) { }
ngOnInit() {
}
openMap() {
this.modalService.open(MapComponent);
}
在模态之外一切正常(地图在给定点居中)但是当我在模态内渲染地图时,地图没有居中。我该如何解决这个问题?
我意识到在小屏幕(如 Galaxy S5 360x460)中,地图显示得很好(居中)。