web-dev-qa-db-ja.com

AGMマップで境界とズームレベルを設定する方法はありますか？

私は AGMマップ を使用していますangular 4アプリケーション、そこに私は問題に直面しています、私はLatitudeの配列としてapiから取得される複数のマーカーを持つことになります地図上のすべてのマーカーを正確にカバーするズームレベルを設定したいと思います。ある国のマーカーと他の国のマーカーの場合でも、地図上のすべてのマーカーを表示するには、ロード時にズームレベルを設定する必要がありますAGM angular maps？でそれを行う方法はありますか？

angulargoogle-mapsgoogle-maps-api-3google-maps-markersangular-google-maps
13
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マップを使用してマップとマーカーを描画するモックサービスを持つ簡単な例を作成しました。この例では、@ ViewChildデコレーターを使用してAGMマップのインスタンスを取得し、mapReadyイベントをリッスンして、マップオブジェクトのインスタンスを取得します（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

これがお役に立てば幸いです！

34
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>
20
Papa Mufflon

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