it-swarm.dev

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

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

8
Thilak Raj

目标

我们想设置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 map绘制地图和标记。在这个例子中,我使用@ViewChild装饰器来获取AGM映射的实例并监听mapReady事件以获取map对象的实例(来自JavaScript API)。一旦我得到地图实例,我就可以轻松创建 LatLngBounds object并在地图对象上调用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

我希望这有帮助!

20
xomena

自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>
7
Papa Mufflon

@ renil - 巴布

而不是在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);
0
Mohammad Zarini Nuairat

我让它使用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));
          });
        }
      );
    }
0
rhavelka