AGM地图:将缩放级别设置为包括所有标记

时间:2018-12-27 08:57:21

标签: google-maps angular-google-maps

要设置地图缩放级别以包括所有位置标记,我尝试了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数组均为空。我该如何解决?

1 个答案:

答案 0 :(得分:0)

将[fitBounds] =“ true”添加到 将[agmFitBounds] =“ true”添加到

删除[usePanning] =“ true”

要获得更多可用性,请添加集群: install this module and follow the instructions