it-swarm.com.ru

Есть ли способ установить границы и масштаб в AGM Map?

Я использую AGM maps для моего приложения angular 4, там я сталкиваюсь с проблемами, у меня будет несколько маркеров, которые выбираются из api в виде массива широты и долготы. Я хочу, чтобы уровень масштабирования точно покрывал все маркеры на карте. Даже если один маркер в одной стране и другой в какой-то другой стране также, он должен установить уровень масштабирования при загрузке, чтобы показать все маркеры на карте. Есть ли способ сделать это в картах AGM angular? Может ли кто-нибудь, пожалуйста, помогите мне

8
Thilak Raj

Цели

Мы хотели бы установить уровень масштабирования карты AGM, чтобы показать все маркеры на карте. Обычно в JavaScript API Google Карт для этого используется метод fitBounds() класса google.maps.Map.

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

Итак, мы должны получить экземпляр объекта карты (экземпляр JavaScript API) и применить к нему fitBounds()

Решение

Я создал простой пример, который имеет фиктивный сервис, который предоставляет данные JSON для 5 маркеров и рисует карту и маркеры, используя карту AGM. В этом примере я использовал декоратор @ViewChild для получения экземпляра карты AGM и прослушивания события mapReady для получения экземпляра объекта карты (из JavaScript API). Получив экземпляр карты, я легко могу создать LatLngBounds object и вызвать fitBounds() для объекта карты. Взгляните на метод ngAfterViewInit() в app.component.ts, чтобы получить представление. 

Фрагмент кода

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 года существует директива 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