Question

我正在使用AGM maps作为我的角度4应用程序，在那里我遇到问题，我将有多个标记从api获取为纬度和经度数组。我想将缩放级别设置为完全覆盖地图上的所有标记。即使一个国家/地区中的一个标记和其他国家/地区的其他标记也是如此，它应该在加载时设置缩放级别以显示地图上的所有标记。有没有办法在AGM角度图中做到这一点？有谁可以帮助我

Answer 1

目标

我们想设置AGM地图的缩放级别以显示地图上的所有标记。通常在Google Maps JavaScript API中，您可以使用google.maps.Map类的fitBounds()方法来实现此目的。

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

因此，我们必须获取地图对象的实例（JavaScript API实例）并在其上应用fitBounds()。

解决方案

我创建了一个简单示例，其中包含一个模拟服务，该服务为5个标记提供JSON数据，并使用AGM贴图绘制地图和标记。在这个例子中，我使用@ViewChild装饰器来获取AGM映射的实例并监听mapReady事件以获取map对象的实例（来自JavaScript API）。获得地图实例后，我可以轻松创建LatLngBounds对象并在地图对象上调用fitBounds()。查看app.component.ts中的ngAfterViewInit()方法以获得一个想法。

代码段

<强> 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>

结论

如果您想查看完整示例，请下载示例项目：

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

我希望这有帮助！

Answer 2

自2018年9月以来，存在AgmFitBounds指令。超级容易。

<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>

Answer 3

我让它使用LatLngBounds()函数。这是片段。

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));
          });
        }
      );
    }

Answer 4

@ renil-babu

您不必在fitBounds上进行mapReady，而必须在添加标记的订阅块中进行

      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);

Answer 5

如果您出于某种原因不使用 agm-marker（您使用 html 标记，就像我一样）那么您的组件可能不支持 agmFitBounds 访问器。为了使其工作，编写实现 FitBoundsAccessor 的自定义组件：

import { ChangeDetectionStrategy, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core';
import { FitBoundsAccessor, FitBoundsDetails } from '@agm/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Component({
    selector: 'guide-map-bounds',
    template: `<ng-content></ng-content>`,
    providers: [{ provide: FitBoundsAccessor, useExisting: forwardRef(() => MapBoundsComponent) }],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MapBoundsComponent implements FitBoundsAccessor, OnChanges {
    @Input() latitude: number;
    @Input() longitude: number;

    private fitBoundsDetails$ = new BehaviorSubject<FitBoundsDetails>(null);

    constructor() { }

    ngOnChanges(changes: SimpleChanges): void {
        const latLng: google.maps.LatLngLiteral = { lat: this.latitude, lng: this.longitude };

        this.fitBoundsDetails$.next({ latLng });
    }

    getFitBoundsDetails$(): Observable<FitBoundsDetails> {
        return this.fitBoundsDetails$.asObservable();
    }
}

然后在您的 html 中，agm-map

<guide-map-bounds [agmFitBounds]="true" *ngFor="let marker of markers" [latitude]="marker.lat" [longitude]="marker.lon">
  <agm-html-overlay [latitude]="marker.lat" [longitude]="marker.lon">
    <div class="marker" >
      
    </div>
  </agm-html-overlay>
</guide-map-bounds>

请注意agm-html-overlay是不支持agmFitBounds的自定义组件

有没有办法在AGM Map中设置边界和缩放级别？

5 个答案:

目标

解决方案

代码段

结论