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

Я создаю приложение Angular 6 с интеграцией Google Javascript API с использованием ГОСА. Карта работает, за исключением динамического добавления маркеров с помощью 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.info(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"
}

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

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

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

Я пробовал еще кое-что:

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

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

А потом в component.ts:

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

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

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

Маркер появляется в DOM и на карте.

Я пробовал еще кое-что (часть 2):

Помещаем HTTP-запрос на получение в метод, вызываемый нажатием кнопки, следующим образом:

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

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

Любые идеи?

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
0
3 443
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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);

Хахаха, я работал над этим около 5 часов и решил это всего за 2 минуты до того, как вы разместили это. Я осознал проблему, когда распечатал статическую точку рядом с точкой из запроса на получение и увидел разные типы данных. Теперь все работает :)

Alex 29.11.2018 21:42

Интересная часть, исходящая из фона C# / java (строго типизированного), заключается в том, что в классе Address и широта, и долгота имеют тип number. Это означает, что они также должны быть числом при ссылке в html-файле ...

Alex 29.11.2018 21:42

рад слышать, что ты понял это

rhavelka 29.11.2018 21:45

Другие вопросы по теме