webentwicklung-frage-antwort-db.com.de

Gibt es eine Möglichkeit, die Grenzen und die Zoomstufe in der AGM-Map festzulegen?

Ich verwende AGM-Karten für meine Anwendung in Winkel 4, da bin ich mit Problemen konfrontiert, ich werde die mehreren Markierungen haben, die von einem API als Array von Latitude und Longitude abgerufen werden. Ich möchte, dass die Zoomstufe alle Markierungen auf der Karte genau abdeckt. Selbst wenn eine Markierung in einem Land und eine andere in einem anderen Land auch vorhanden ist, sollte beim Laden die Zoomstufe so eingestellt werden, dass alle Marker auf der Karte angezeigt werden. Gibt es eine Möglichkeit, dies in AGM-Winkelkarten zu tun? Könnte mir bitte jemand helfen?

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

Ziele

Wir möchten eine Vergrößerungsstufe der AGM-Karte festlegen, um alle Markierungen auf der Karte anzuzeigen. Normalerweise verwenden Sie in der Google Maps-JavaScript-API die fitBounds()-Methode der Klasse google.maps.Map, um dies zu erreichen.

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

Also müssen wir eine Instanz des Map-Objekts (die JavaScript-API-Instanz) abrufen und fitBounds() darauf anwenden. 

Lösung

Ich habe ein einfaches Beispiel erstellt, das über einen Mock-Service verfügt, der JSON-Daten für 5 Marker bereitstellt und mithilfe von AGM-Map Karten und Marker zeichnet. In diesem Beispiel habe ich @ViewChild decorator verwendet, um die Instanz der AGM-Map abzurufen und das Ereignis mapReady anzuhören, um die Instanz des Map-Objekts (von der JavaScript-API) abzurufen. Sobald ich eine Karteninstanz bekomme, kann ich leicht LatLngBounds object erstellen und fitBounds() für das Kartenobjekt aufrufen. Sehen Sie sich die ngAfterViewInit()-Methode in app.component.ts an, um eine Vorstellung zu bekommen. 

Code-Auszug

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>

Fazit

Wenn Sie das vollständige Beispiel überprüfen möchten, laden Sie das Beispielprojekt herunter:

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

Ich hoffe das hilft! 

20
xomena

Seit September 2018 gibt es die Direktive AgmFitBounds . Super einfach.

<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

Anstatt die Variable fitBounds für mapReady auszuführen, müssen Sie dies in Ihrem Block zum Hinzufügen von Markern tun

      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

Ich habe es mit der Funktion LatLngBounds() arbeiten lassen. Hier ist der Ausschnitt.

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