要设置地图缩放级别以包括所有位置标记,我尝试了this post中建议的两个选项。
这就是我所做的:
export class LocationSelectionComponent implements OnInit, AfterViewInit {
@ViewChild('AgmMap') agmMap: AgmMap;
ngAfterViewInit() {
console.log(this.agmMap);
this.agmMap.mapReady.subscribe(map => {
const bounds: LatLngBounds = new window['google'].maps.LatLngBounds();
for (const mm of this.mapMarkers) {
if (mm.latitude !== this.currentLocationLatitude && mm.longitude !== this.currentLocationLongitude) {
bounds.extend(new window['google'].maps.LatLng(mm.latitude, mm.longitude));
}
}
map.fitBounds(bounds);
});
}
}
请注意,this.mapMarkers是一个数组,其中包含地图标记的坐标。这些填充在ngOnInit()
中。
如上一篇文章的评论中所述,我还尝试了以下方法:
onMapReady(map: AgmMap) {
const bounds: LatLngBounds = new window['google'].maps.LatLngBounds();
for (const mm of this.mapMarkers) {
if (mm.latitude !== this.currentLocationLatitude && mm.longitude !== this.currentLocationLongitude) {
bounds.extend(new window['google'].maps.LatLng(mm.latitude, mm.longitude));
}
}
// @ts-ignore
map.fitBounds(bounds);
}
然后使用HTML:
<agm-map #AgmMap [latitude]="latitude" [longitude]="longitude"
[fullscreenControl]="true" [mapTypeControl]="true" (mapReady)="onMapReady($event)">
<agm-marker *ngFor="let m of mapMarkers; let i = index"
[latitude]="m.latitude"
[longitude]="m.longitude"
[title]="m.title"
[iconUrl]="m.iconUrl"
[animation]="m.animation"
(markerClick)="clickedMarker(m.label)">
</agm-marker>
</agm-map>
但是在两种情况下,我都无法像预期的那样缩小地图。原因是,当我调试代码时,两个实例中的mapMarkers数组均为空。我该如何解决?
答案 0 :(得分:0)
将[fitBounds] =“ true”添加到 将[agmFitBounds] =“ true”添加到
从
删除[usePanning] =“ true”要获得更多可用性,请添加集群: install this module and follow the instructions