Angular-google-maps: AGM mapClick ($ event) не работает должным образом

Созданный на 24 июл. 2020  ·  20Комментарии  ·  Источник: SebastianM/angular-google-maps

Я сделал руководство по началу работы с AGM: https://angular-maps.com/guides/getting-started/

Я установил:
"@ angular / core": "~ 10.0.0"
а также
"@ agm / core": "^ 3.0.0-beta.0"

В app.component.html я добавил:


В app.component.ts я добавил:
export class AppComponent {
title = 'gbis';
lat = 51,678418;
lng = 7.809007;

mapClick(e) {
    console.log(e);
}

}

В app.component.css я добавил:
agm-map {
высота: 300 пикселей;
}

Когда я запускаю это приложение, карта работает, но если я нажимаю на карту в функции файла TS mapClick (e), я получаю e = "c". Координаты не получены из параметра e.

пожалуйста помоги!

urgent bug

Самый полезный комментарий

В качестве обходного пути вы можете добавить слушателя к экземпляру карты Google.

<agm-map [latitude]="position.lat"
         [longitude]="position.lng"
         [zoom]="zoom"
         (mapReady)="mapReadyHandler($event)">
</agm-map>
public mapReadyHandler(map: google.maps.Map): void {
  this.map = map;
  this.mapClickListener = this.map.addListener('click', (e: google.maps.MouseEvent) => {
    this.zone.run(() => {
      // Here we can get correct event
      console.log(e.latLng.lat(), e.latLng.lng());
    });
  });
}

public ngOnDestroy(): void {
  if (this.mapClickListener) {
    this.mapClickListener.remove();
  }
}

Все 20 Комментарий

ETA на это исправление? или обходной путь?

Я столкнулся с точно такой же проблемой.

Кто-нибудь может исправить эту проблему?

та же проблема, нужно использовать старую версию, чтобы ее обойти?

Кто-нибудь может исправить эту проблему?

Кто-нибудь может исправить эту проблему?

Я предлагаю пока использовать старую версию, так как эта ошибка критична, сводя на нет базовое взаимодействие с картой.

Кто-нибудь может исправить эту проблему?

Я предлагаю пока использовать старую версию, так как эта ошибка критична, сводя на нет базовое взаимодействие с картой.

Да, предыдущая версия 1.1.0 (8 месяцев назад) работает нормально.

простое исправление на # 1847, жду обзора от @SebastianM

Я столкнулся с той же проблемой. $ event в mapClick возвращает строку «c». Есть идеи, когда это будет исправлено? Любое решение, кроме перехода на более старую версию?

В качестве обходного пути вы можете добавить слушателя к экземпляру карты Google.

<agm-map [latitude]="position.lat"
         [longitude]="position.lng"
         [zoom]="zoom"
         (mapReady)="mapReadyHandler($event)">
</agm-map>
public mapReadyHandler(map: google.maps.Map): void {
  this.map = map;
  this.mapClickListener = this.map.addListener('click', (e: google.maps.MouseEvent) => {
    this.zone.run(() => {
      // Here we can get correct event
      console.log(e.latLng.lat(), e.latLng.lng());
    });
  });
}

public ngOnDestroy(): void {
  if (this.mapClickListener) {
    this.mapClickListener.remove();
  }
}

Кто-нибудь может исправить эту проблему?

Я предлагаю пока использовать старую версию, так как эта ошибка критична, отрицая базовое взаимодействие с картой.

Да, более старая версия 1.1.0 (8 месяцев назад) работает нормально.

Если он работает с версией 1.1.0, используйте команду npm i @ agm / [email protected]

Когда это будет выпущено?

Та же проблема на "@ agm / core": "^ 3.0.0-beta.0"

@ egorkel-da14 Я пытаюсь решить эту проблему, но получаю следующее сообщение:
Uncaught TypeError: Cannot read property 'run' of undefined
при вызове this.zone.run(...)

Я что-то упустил?

update: кажется, что я могу получить координаты, опуская эту строку:

    public mapReadyHandler(map: google.maps.Map): void {
        this.map = map;
        this.mapClickListener = this.map.addListener('click', (e: google.maps.MouseEvent) => {
            console.log(e.latLng.lat(), e.latLng.lng());
        });
    }

@ egorkel-da14 Я пытаюсь решить эту проблему, но получаю следующее сообщение:
Uncaught TypeError: Cannot read property 'run' of undefined
при вызове this.zone.run(...)

Я что-то упустил?

update: кажется, что я могу получить координаты, опуская эту строку:

    public mapReadyHandler(map: google.maps.Map): void {
        this.map = map;
        this.mapClickListener = this.map.addListener('click', (e: google.maps.MouseEvent) => {
            console.log(e.latLng.lat(), e.latLng.lng());
        });
    }

Да :)
вам нужно внедрить службу NgZone в конструктор

constructor(private zone: NgZone) {}

Эта строка нужна вам для правильной работы обнаружения изменений Angular (для правильного обновления представления)
@paishin

вызов event.latLng.lat () работает
markerDragEnd ($ event: any) {
console.log ($ event.latLng.lat (), $ event.latLng.lng ());
}

У меня такая же проблема с функцией addPin, но мне нужно использовать версию 3.0.0 для перевода карт в соответствии с локалью пользователя. Итак, мне нужно знать, была ли версия с переводом и добавлением пин-кода опубликована ранее или нет? (потому что в версии 1.1.0 перевод все еще недоступен)

Кто-нибудь может исправить эту проблему?

Я предлагаю пока использовать старую версию, так как эта ошибка критична, отрицая базовое взаимодействие с картой.

Да, более старая версия 1.1.0 (8 месяцев назад) работает нормально.

Если он работает с версией 1.1.0, используйте команду npm i @ agm / [email protected]

С Angular 10?

В качестве обходного пути вы можете добавить слушателя к экземпляру карты Google.

<agm-map [latitude]="position.lat"
         [longitude]="position.lng"
         [zoom]="zoom"
         (mapReady)="mapReadyHandler($event)">
</agm-map>
public mapReadyHandler(map: google.maps.Map): void {
  this.map = map;
  this.mapClickListener = this.map.addListener('click', (e: google.maps.MouseEvent) => {
    this.zone.run(() => {
      // Here we can get correct event
      console.log(e.latLng.lat(), e.latLng.lng());
    });
  });
}

public ngOnDestroy(): void {
  if (this.mapClickListener) {
    this.mapClickListener.remove();
  }
}

Большое спасибо за этот код, он очень полезен, хорошего дня

Была ли эта страница полезной?
0 / 5 - 0 рейтинги