it-swarm.dev

Existe uma maneira de definir os limites e o nível de zoom no mapa do AGM?

Eu estou usando AGM maps para meu aplicativo angular 4, lá estou enfrentando problemas, terei vários marcadores que são obtidos da API como uma matriz de Latitude e Longitude. Quero definir o nível de zoom cobrindo todos os marcadores no mapa. Mesmo se um marcador em um país e outro em algum outro país também, deve definir o nível de zoom em carga para mostrar todos os marcadores no mapa. Existe uma maneira de fazer isso em mapas angulares AGM? Alguém poderia me ajudar por favor

8
Thilak Raj

Objetivos

Gostaríamos de definir um nível de zoom do mapa da AGM para mostrar todos os marcadores no mapa. Normalmente, na API JavaScript do Google Maps, você usa o método fitBounds() da classe google.maps.Map para conseguir isso.

https://developers.google.com/maps/documentation/javascript/reference/3/map

Portanto, precisamos obter uma instância do objeto de mapa (a instância da API JavaScript) e aplicar fitBounds() nela. 

Solução

Eu criei um exemplo simples que tem um serviço simulado que fornece dados JSON para 5 marcadores e desenha mapa e marcadores usando o mapa AGM. Neste exemplo, usei o @ViewChild decorator para obter a instância do mapa da AGM e ouvir o evento mapReady para obter a instância do objeto de mapa (da API JavaScript). Depois de obter a instância do mapa, posso facilmente criar LatLngBounds object e chamar fitBounds() no objeto do mapa. Dê uma olhada no método ngAfterViewInit() no app.component.ts para ter uma ideia. 

Fragmento de código

app.component.ts

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MyMarker } from './marker';
import { MarkersService } from './markers.service';
import { GoogleMapsAPIWrapper, AgmMap, LatLngBounds, LatLngBoundsLiteral} from '@agm/core';

declare var google: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {

  title = 'AGM project (so48865595)';
  lat = 41.399115;
  lng = 2.160962;
  markers: MyMarker[];

  @ViewChild('AgmMap') agmMap: AgmMap;

  constructor(private markersService: MarkersService) { }

  ngOnInit() {
    this.getMarkers();
  }

  ngAfterViewInit() {
    console.log(this.agmMap);
    this.agmMap.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);
    });
  }

  getMarkers(): void {
    this.markers = this.markersService.getMarkers();
  }

  mapIdle() {
    console.log('idle');
  }
}

app.component.html

<h1>{{ title }}</h1>

<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->
<agm-map #AgmMap [latitude]="lat" [longitude]="lng" (idle)="mapIdle()">
  <agm-marker *ngFor="let p of markers" [latitude]="p.lat" [longitude]="p.lng"></agm-marker>
</agm-map>

Conclusão

Se você gostaria de verificar o exemplo completo, faça o download do projeto de amostra:

https://github.com/xomena-so/so48865595

Eu espero que isso ajude! 

20
xomena

Desde setembro de 2018 existe a diretiva AgmFitBounds . Super fácil.

<agm-map
  style="width:100vw; height:100vh;"
  [fitBounds]="true">

  <agm-marker
    *ngFor="let location of locations"
    [latitude]="location.latitude"
    [longitude]="location.longitude"
    [agmFitBounds]="true"></agm-marker>
</agm-map>
7
Papa Mufflon

@ renil-babu

Em vez de fazer o fitBounds em mapReady, você precisa fazer isso no bloco de assinatura de marcadores de adição

      const bounds: LatLngBounds = new google.maps.LatLngBounds();
      for (const mm of this.markers) {
        bounds.extend(new google.maps.LatLng(mm.lat, mm.lng));
      }
      // @ts-ignore
      this.agmMap._mapsWrapper.fitBounds(bounds);
0
Mohammad Zarini Nuairat

Eu tenho que trabalhar com a função LatLngBounds(). Aqui está o trecho.

import {AgmInfoWindow, MapsAPILoader} from '@agm/core';

latlngBounds: any;

// fits the map to the bounds
    if (this.points.length.) {
      this.mapsAPILoader.load().then(() => {
          this.latlngBounds = new window['google'].maps.LatLngBounds();
          _.each(this.points, location => {
            this.latlngBounds.extend(new window['google'].maps.LatLng(location.lat, location.lng));
          });
        }
      );
    }
0
rhavelka