web-dev-qa-db-fra.com

Existe-t-il un moyen de définir les limites et le niveau de zoom dans AGM Map?

J'utilise cartes AGM pour mon application angulaire 4, je serai confronté à des problèmes. Je disposerai des marqueurs multiples extraits de l'API sous forme de matrice de latitude et de longitude. Je souhaite définir un niveau de zoom couvrant exactement tous les marqueurs de la carte. Même si un marqueur dans un pays et un autre dans un autre pays aussi, il convient de définir le niveau de zoom sur la charge pour afficher tous les marqueurs sur la carte . Y a-t-il un moyen de faire cela dans les cartes angulaires de l'AGA? Quelqu'un pourrait-il m'aider s'il vous plaît

angulargoogle-mapsgoogle-maps-api-3google-maps-markersangular-google-maps
8
Thilak Raj

Objectifs

Nous aimerions définir un niveau de zoom de la carte AGA pour afficher tous les marqueurs sur la carte. Généralement, dans l'API JavaScript de Google Maps, vous utilisez la méthode fitBounds() de la classe google.maps.Map pour atteindre cet objectif.

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

Nous devons donc obtenir une instance de l'objet de la carte (l'instance de l'API JavaScript) et y appliquer fitBounds(). 

Solution

J'ai créé un exemple simple avec un service fictif qui fournit des données JSON pour 5 marqueurs et dessine des cartes et des marqueurs à l'aide de la carte AGM. Dans cet exemple, j'ai utilisé le décorateur @ViewChild pour obtenir l'instance de la carte AGM et écouter l'événement mapReady pour obtenir l'instance de l'objet carte (à partir de l'API JavaScript). Une fois que j'ai obtenu une instance de carte, je peux facilement créer LatLngBounds object et appeler fitBounds() sur un objet de carte. Examinez la méthode ngAfterViewInit() dans app.component.ts pour vous faire une idée. 

Extrait de code

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>

Conclusion

Si vous souhaitez vérifier l'exemple complet, veuillez télécharger l'exemple de projet:

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

J'espère que ça aide! 

20
xomena

Depuis septembre 2018, il existe la directive AgmFitBounds . Super facile.

<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

Au lieu de faire fitBounds sur mapReady, vous devez le faire dans votre bloc d’ajout de marqueurs

      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

Je l’ai fait fonctionner avec la fonction LatLngBounds(). Voici l'extrait.

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