Как установить карту по центру на маркере?- Угловые Карты Google - PullRequest
Новая
       35

Как установить карту по центру на маркере?- Угловые Карты Google

1 голос
/ 04 июля 2019

Я не могу центрировать свою карту Google на маркере после геокодирования.

У меня есть два маркера: исходный маркер (тот, на котором отцентрировано, не изменяется), другой меняется в зависимости от геокодирования, и после геокодирования он будет центрироваться каждый раз.

Мой код: TS 

  zoom = 10;

  addressData: FormGroup;
  submitted = false;
  success = false;

  lat: number;
  lng: number;

  userLat: number;
  userLng: number;

  currentCenter = { lat: null, lng: null };

  private geoCoder: google.maps.Geocoder;

  @ViewChild('googleMap') googleMap: AgmMap;

  constructor(private maps: MapsAPILoader, private bulider: FormBuilder) { }

  ngOnInit() {
    this.addressData = this.bulider.group({
      address: ["", Validators.required],
    });

    this.maps.load().then(() => {
      this.geoCoder = new google.maps.Geocoder();
    });
  }

  getAddress() {

    this.submitted = true;

    if (this.addressData.invalid) {
      return;
    }

    this.success = true;



 this.googleMap.mapReady.subscribe(map => {

// Need to use two parameters in order to use Geocoder
      this.geoCoder.geocode(this.addressData.controls['address'].value, (results, status) => {
    if (status === google.maps.GeocoderStatus.OK) {
      this.userLat = results[0].geometry.location.lat();
      this.userLng = results[0].geometry.location.lng();
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }

  }).then(place => {
    this.currentCenter = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() };
  }).catch(err => {
    console.log("Error: " + err);
  });
});
    this.submitted = false;
  }

HTML 

    <!-- Google maps, the starting latitude & longitude -->
  <agm-map [latitude]="currentCenter.lat" [longitude]="currentCenter.lng" [zoom]="zoom" [mapTypeControl]='true'
    #googleMap>
    <!-- Static marker -->
    <agm-marker [latitude]="defaultCenter.lat" [longitude]="defaultCenter.lng"></agm-marker>

    <!-- User geolocation marker, changes -->
    <agm-marker [latitude]="currentCenter.userLat" [longitude]="currentCenter.userLng"></agm-marker>
  </agm-map>

Ожидаемое

После геокодирования карта должна центрироваться на маркере с данного адреса каждый раз.

Фактический :

Геокодер находит адрес, но не центрирует карту на размещенном маркере на основе адреса.

Обновление

Я не могу использовать код Вадима, потому что компилятор говорит мне, что мне нужно два аргумента для Geocode, но код Вадима имеет только один. Я не могу использовать этот код. Также, если я добавлю второй аргумент, он скажет, что then не существует. 

this.googleMap.mapReady.subscribe(map => {
  // This line needs two parameters not one
this.geoCoder.geocode(this.addressData.controls['address'].value).then(place => {
        this.currentCenter = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() };
      }).catch(err => {
        console.log("Error: " + err);
      });
    });

Ответы [ 3 ]

0 голосов
/ 07 июля 2019

Согласно документам, метод triggerResize()

вызывается с текущими значениями lat / lng или значением fitBounds для повторного создания карты

https://angular -maps.com / апи-документы / AGM-жильный / компоненты / agmmap # triggerResize

Однако вы не обновляете долготу / широту карты, поскольку вы привязали свойство к initLat и initLng. <agm-map [latitude]="initLat" [longitude]="initLng" [zoom]="zoom">

Вам необходимо обновить координаты map , чтобы перецентрировать на triggerResize(). Будьте осторожны, чтобы привязать шаблон к нужному атрибуту в вашем классе. В фрагменте ts, который вы указали userLat и userLng, нет, поэтому ваш маркер с геолокацией также будет проблематичным.

Обновлен шаблон: 

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [mapTypeControl]='true'>
<!-- Static marker -->
<agm-marker [latitude]="initLat" [longitude]="initLng"></agm-marker>

<!-- User geolocation marker, changes -->
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

Возможно, вам потребуется инициализировать lat и lng некоторым значением в вашем файле ts.

0 голосов
/ 10 июля 2019

Нет необходимости прибегать к API Карт Google или вызывать метод карты triggerResize, чтобы обновить центр карты, можно рассмотреть следующий подход:

a) установить центр карты на по умолчанию *Значение 1005 * после загрузки карты 

<agm-map
  [latitude]="currentCenter.lat"
  [longitude]="currentCenter.lng"
  [zoom]="zoom"
  [mapTypeControl]="true"
>
  <!-- Static marker -->
  <agm-marker
    [latitude]="defaultCenter.lat"
    [longitude]="defaultCenter.lng"
  ></agm-marker>

  <!-- User geolocation marker, changes -->
  <agm-marker
    [latitude]="currentCenter.lat"
    [longitude]="currentCenter.lng"
  ></agm-marker>
</agm-map>

Для этого введены два свойства:

  • currentCenter - текущий центр карты
  • defaultCenter- центр карты по умолчанию (оригинальный)

b) после разрешения адреса обновите центр карты следующим образом: 

ngOnInit() {
    this.agmMap.mapReady.subscribe(map => {
      this.geocode("New York, USA").then(place => {
        this.currentCenter = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng()};
      })
      .catch(err => {
        console.log(err);
      });
    });
 }

Пример 

declare var google: any;

import { Component, ViewChild, OnInit} from "@angular/core";
import { AgmMap } from "@agm/core";

@Component({
  selector: "app-map",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  constructor() {}

  defaultCenter = {lat: 55.5815245, lng: 36.8251383};
  currentCenter = Object.assign({}, this.defaultCenter);
  zoom = 3;

  @ViewChild(AgmMap) agmMap;

  ngOnInit() {
    this.agmMap.mapReady.subscribe(map => {
      this.geocode("New York, USA").then(place => {
        this.currentCenter = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng()};
      })
      .catch(err => {
        console.log(err);
      });
    });
  }

  geocode(address: string): Promise<any> {
    const geocoder = new google.maps.Geocoder();
    return new Promise((resolve, reject) => {
      geocoder.geocode(
        {
          address: address
        },
        (results, status) => {
          if (status === google.maps.GeocoderStatus.OK) {
            resolve(results[0]);
          } else {
            reject(new Error(status));
          }
        }
      );
    });
  }
}

Обновление

Получение адреса от элемента ввода: 

<input [(ngModel)]="addressText">
<button (click)="findPlace()">Find a place</button>


findPlace() {
    this.geocode(this.addressText).then(place => {
      this.currentCenter = { lat: place.geometry.location.lat(), lng: place.geometry.location.lng()};
    })
    .catch(err => {
      console.log(err);
    });
}
0 голосов
/ 04 июля 2019

Попробуйте использовать this.ref.detectChanges() и посмотрите на этот пример

...