Как динамически добавить маркер в компонент Google Maps на HTTPGET (Angular 6)

Question

Я создаю приложение Angular 6 с интеграцией Google Javascript API с использованием AGM .Карта работает, за исключением динамического добавления маркеров с использованием http get.

Это component.html:

<agm-map [latitude]="51.017467" [longitude]="10.233982">
    <agm-marker *ngFor="let position of positions" [latitude]="position.latitude"
                [longitude]="position.longitude"></agm-marker>
</agm-map>

И component.ts:

export class EventsListComponent {
 public positions = [new Position(51.017467, 10.233982)]; // static point for debug

 constructor(public http: HttpClient) {
  let eventIds: string[] = ['5bffbac5596a7de59190dfbb']; // also for debug
  for (let eventId of eventIds) {
    this.http.get<Address>("api/v1/Events/Get/" + eventId +"/GetVenue/GetAddress").subscribe(result => {
      console.log(result);
      this.addresses.push(result);
    });
  }
}

export class Address {

  constructor(
    public latitude: number,
    public longitude: number,
    public addressLine: string,
    public city: string,
    public state: string,
    public country: string,
    public zip) {
  }
}

Этовывод на консоль:

{
"addressLine":"Gartenstraße 7",
"city":"Eschwege",
"country":"Germany",
"zip":"37269",
"state":"Hessen",
"latitude":"51.1821073",
"longitude":"10.0572713"
}

Создает следующий результат:

Маркер отображаетсяв DOM, но не на карте (маркер, который вы видите, является статическим, их должно быть два).

Что-то еще, что я пробовал:

Добавление маркеров динамически работает с нажатиями кнопок, как это:

<button (click)="btnClick()" class="btn btn-primary"></button>

А затем в component.ts:

btnClick() {
    this.addresses.push(new Address(51.1821073, 10.0572713,"","","","",""));
}

Создает следующий результат:

Маркер отображается в DOM и на карте.

Что-то еще, что я пробовал (pt2):

Установка httpполучить запрос в методе, вызываемом нажатием кнопки следующим образом:

btnClick() {
    this.http.get<Address>("api/v1/Events/Get/" + eventId +"/GetVenue/GetAddress").subscribe(result => {
    console.log(result);
    this.addresses.push(result);
  });
}

Он по-прежнему только добавляет маркер в дом, а не на карту.

Есть идеи?

Answer 1

Я думаю, что вы передаете lat / lng в виде строки (как обозначено "" в журнале консоли), когда вы используете сервисный вызов, но вы передаете его как число, когда добавляете его вручную.Попробуйте сделать что-то вроде этого

this.addresses.push({
  addressLine: result.addressLine,
  city: result.city,
  country: result.country,
  zip: result.zip,
  state: result.state,
  latitude: +result.latitude,
  longitude: +result.longitude
});

, или вы можете попробовать сократить его до чего-то вроде этого

result.latitude = +result.latitude;
result.longitude = +result.longitude;
this.addresses.push(result);