Карта AGM: установите уровень масштабирования, чтобы включить все маркеры - PullRequest
Новая
       49

Карта AGM: установите уровень масштабирования, чтобы включить все маркеры

0 голосов
/ 27 декабря 2018

Чтобы установить уровень масштабирования карты, чтобы включить все маркеры местоположения, я попробовал два варианта, как предложено в этом сообщении .

Вот что я сделал: 

export class LocationSelectionComponent implements OnInit, AfterViewInit {

@ViewChild('AgmMap') agmMap: AgmMap;

ngAfterViewInit() {
  console.log(this.agmMap);
  this.agmMap.mapReady.subscribe(map => {
  const bounds: LatLngBounds = new window['google'].maps.LatLngBounds();
  for (const mm of this.mapMarkers) {
    if (mm.latitude !== this.currentLocationLatitude && mm.longitude !== this.currentLocationLongitude) {
      bounds.extend(new window['google'].maps.LatLng(mm.latitude, mm.longitude));
     }
   }

   map.fitBounds(bounds);
  });
 }
}

Обратите внимание, что this.mapMarkers - это массив, содержащий координаты маркеров карты.Они заполнены в ngOnInit().

Как упоминалось в комментарии к вышеприведенному посту, я также попробовал следующее: 

   onMapReady(map: AgmMap) {
 const bounds: LatLngBounds = new window['google'].maps.LatLngBounds();
 for (const mm of this.mapMarkers) {
   if (mm.latitude !== this.currentLocationLatitude && mm.longitude !== this.currentLocationLongitude) {
     bounds.extend(new window['google'].maps.LatLng(mm.latitude, mm.longitude));
   }
 }

 // @ts-ignore
 map.fitBounds(bounds);

}

затем вHTML: 

  <agm-map #AgmMap [latitude]="latitude" [longitude]="longitude"
                   [fullscreenControl]="true" [mapTypeControl]="true" (mapReady)="onMapReady($event)">
            <agm-marker *ngFor="let m of mapMarkers; let i = index"
                        [latitude]="m.latitude"
                        [longitude]="m.longitude"
                        [title]="m.title"
                        [iconUrl]="m.iconUrl"
                        [animation]="m.animation"
                        (markerClick)="clickedMarker(m.label)">
            </agm-marker>
          </agm-map>

Но в обоих случаях карту не уменьшают, как я ожидаю.Причина в том, что когда я отлаживаю код, массив mapMarkers в обоих случаях пуст.Как мне это исправить?

1 Ответ

0 голосов
/ 01 февраля 2019

Добавить [fitBounds] = "true" для добавления [agmFitBounds] = "true" для

Удалить [usePanning] = "true" из

Для большей простоты использования Добавить кластеризацию: установите этот модуль и следуйте инструкциям

...