Как я могу автоматически увеличить мою карту в определенной позиции в агм.Пожалуйста, обратите внимание, что все маркеры очень близки друг к другу

Question

Снимок экрана маркеров:

Мне нужен вывод:

Это мой пример кода mapcomponent.html

<div id="wide">
  <div *ngIf="isDataLoaded">
    <agm-map [latitude]="lat" [longitude]="lng" #gm  (mapClick)="closeInfoWindow(infoWindow,gm)" (mapReady)="abc($event)">
      <agm-marker  [latitude]="lat" [longitude]="lng" [iconUrl]="iconUrl"></agm-marker>
        <agm-marker 
        *ngFor="let m of markers ; let i = index"
        [latitude]="m.lat"
        [longitude]="m.lng"
        (markerClick)="getDirection(m.lat,m.lng)"
        (mouseOver)="onMouseOver(infoWindow,gm)">
        <agm-info-window [disableAutoPan]="false" #infoWindow>
            <div>
                {{m.name}}
                {{m.rating}}
            </div>
        </agm-info-window>
          <!-- <agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true"    [backgroundColor]="'#ADD8E6'"  [border]="true" [borderRadius]="'10px'"  [fontSize]="'100px'" [fontColor]="'#FF0000'" [padding]="'20px'">  
            <ng-template>

                <mat-card>{{m.name}}
                  {{m.rating}}</mat-card>

            </ng-template>
          </agm-snazzy-info-window>  -->          
          <agm-direction [origin]=origin [destination]=destination [renderOptions]="renderOptions" >
        </agm-direction> 
    </agm-marker>
    </agm-map>
  </div> 
</div>


mapcomponent.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { GoogleMapsAPIWrapper, AgmMap, LatLngBounds, LatLngBoundsLiteral} from '@agm/core';

declare var google: any;
@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit{
  title: string = 'My first AGM project';
  Getresponse:any;
  lat: number ;
  lng: number ;
  isDataLoaded:boolean = false;
  iconUrl: string = "assets/images/icons8-user-location-48.png";
  public origin: any; 
  public destination: any;
 city:string;
 @ViewChild('gm') gm: AgmMap;

 ngAfterViewInit() {
  console.log(this.gm);
  this.gm.mapReady.subscribe(map => {
    const bounds: LatLngBounds = new google.maps.LatLngBounds();
    for (const mm of this.markers) {
      bounds.extend(new google.maps.LatLng(mm.lat, mm.lng));
    }
    map.fitBounds(bounds);
  });
}

  onMouseOver(infoWindow, gm) {

    if (gm.lastOpen != null) {
        gm.lastOpen.close();
    }

    gm.lastOpen = infoWindow;

    infoWindow.open();
}

  public renderOptions = {
    suppressMarkers: true,
}
constructor(private route: ActivatedRoute, private router: Router , private http: HttpClient) { 
  console.log(this.router.url,"Current URL");
  //console.log(this.city= this.route.snapshot.queryParamMap.get('location'));
}
markers: Array<marker>=[];
response: any;
  ngOnInit() {

    this.isDataLoaded=true;
    this.city= this.route.snapshot.queryParamMap.get('location');
    this.http.get('http://localhost:64539//api/Data/position/'+this.city).subscribe((response)=>{
      this.Getresponse = response;
      this.lat =  this.Getresponse.latitudePosition;
      this.lng=this.Getresponse.longitudePosition;

    })

 this.http.get('http://localhost:64539//api/Data/insideAirport/puneairport/12/13/store').
  subscribe((response)=>
  {
  this.response = response;
  for(let data in response){
    this.markers.push({
      lat: Number(response[data].latitude),
      lng: Number(response[data].longitude),
      name:response[data].name,
      rating:response[data].rating,

    })
  }
})
}
}
class marker {
  lat: number;`enter code here`
  lng: number;  
name:string;
rating:string

}

Так что здесь я использую карты agm.Я не могу написать код для масштабирования в определенном месте пользователя.Я пробовал mapReadyevent, но все еще не могу понять.

Я также пытался сделать это, используя подходящие границы карт Google.Все еще не могу найти решение.

Ну, мои маркеры находятся в том же месте.Как будто я буду получать маркеры всех магазинов в конкретном аэропорту, поэтому эти маркеры очень близки друг к другу, это не значит, что мои маркеры находятся в разных странах, и я хочу, чтобы они отображались на моей карте.Мои маркеры будут на одном месте с очень меньшей разницей в широте и долготе

Answer 1

вы можете использовать событие AgmMap mapReady

<agm-map[latitude]="lat" [longitude]="lng" #gm mapClick)="closeInfoWindow(infoWindow,gm)" (mapReady)="mapReady($event)">

и в вашем файле Ts указать лат и lng этой конкретной позиции.

mapReady(map) {
  const bonds: LatLngBounds = new google.maps.LatLngBounds();
  bonds.extend(new google.maps.LatLng(this.showShop.lat, this.showShop.lng));
  map.fitBounds(bonds);
}