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

Question

我正在使用 AGM maps对于我的 angular 4 应用程序，我遇到了问题，我将从 api 获取的多个标记作为纬度和经度的数组。我想将缩放级别设置为完全覆盖 map 上的所有标记。即使一个国家的一个标记和另一个国家的另一个标记，它也应该在加载时设置缩放级别以显示 map 上的所有标记。 有没有办法在 AGM Angular 图中做到这一点？谁能帮帮我

Answer 1

目标

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

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

因此，我们必须获取 map 对象的实例(JavaScript API 实例)并对其应用 fitBounds()。

解决方案

我创建了一个简单的示例，它有一个模拟服务，为 5 个标记提供 JSON 数据，并使用 AGM map 绘制 map 和标记。在此示例中，我使用@ViewChild 装饰器获取 AGM map 实例并监听 mapReady 事件以获取 map 对象实例(来自 JavaScript API)。获得 map 实例后，我可以轻松创建 LatLngBounds对象并在 map 对象上调用 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

希望对您有所帮助!