Angular-google-maps: AGM mapClick ($ event) tidak bekerja dengan baik

Dibuat pada 24 Jul 2020 · 20Komentar · Sumber: SebastianM/angular-google-maps

Saya membuat tutorial Memulai RUPS: https://angular-maps.com/guides/getting-started/

Saya telah menginstal:
"@ sudut / inti": "~ 10.0.0"
dan
"@ agm / core": "^ 3.0.0-beta.0"

Di app.component.html saya menambahkan:

Di app.component.ts saya menambahkan:
ekspor kelas AppComponent {
title = 'gbis';
lat = 51.678418;
lng = 7.809007;

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

}

Di app.component.css saya menambahkan:
agm-map {
tinggi: 300px;
}

Ketika saya menjalankan aplikasi ini, peta berfungsi tetapi jika saya mengklik peta dalam fungsi file TS mapClick (e) saya menerima e = "c". Tidak ada koordinat yang diterima dari parameter e.

tolong bantu!

urgent bug

Sumber

markolo

👍9

Komentar yang paling membantu

Sebagai solusinya, Anda dapat menambahkan pendengar ke contoh peta 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();
  }
}

egorkel-da14 pada 11 Agu 2020

👍17 🚀7 ❤5 🎉1

Semua 20 komentar

ETA tentang perbaikan ini? atau solusi?

amalmo pada 27 Jul 2020

👍1

Saya mengalami masalah yang persis sama.

sqaliu pada 30 Jul 2020

👍2

Adakah yang bisa memperbaiki masalah ini?

CesarIAndrade pada 2 Agu 2020

👍2 😕1

masalah yang sama, harus menggunakan versi yang lebih lama untuk mengatasinya?

gggiiia pada 3 Agu 2020

Adakah yang bisa memperbaiki masalah ini?

Juanreverter pada 3 Agu 2020

Adakah yang bisa memperbaiki masalah ini?

Saya menyarankan untuk menggunakan versi lama untuk saat ini, karena bug ini sangat penting, meniadakan interaksi dasar dengan peta

gggiiia pada 3 Agu 2020

👍2

Adakah yang bisa memperbaiki masalah ini?
Saya menyarankan untuk menggunakan versi lama untuk saat ini, karena bug ini sangat penting, meniadakan interaksi dasar dengan peta

Ya, versi sebelumnya 1.1.0 (8 bulan yang lalu) berfungsi dengan baik.

Juanreverter pada 4 Agu 2020

👍1

perbaikan sederhana di # 1847, menunggu review dari @SebastianM

ghost pada 4 Agu 2020

🚀1 👍1

Saya menghadapi masalah yang sama. $ event di mapClick mengembalikan string "c". Ada ide kapan ini akan diperbaiki? Ada solusi lain selain beralih ke versi yang lebih lama?

AsadAmir111 pada 10 Agu 2020

Sebagai solusinya, Anda dapat menambahkan pendengar ke contoh peta 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();
  }
}

egorkel-da14 pada 11 Agu 2020

👍17 🚀7 ❤5 🎉1

Adakah yang bisa memperbaiki masalah ini?
Saya menyarankan menggunakan versi lama untuk saat ini, karena bug ini sangat penting, menyangkal interaksi dasar dengan peta
Ya, versi yang lebih lama 1.1.0 (8 bulan yang lalu) berfungsi dengan baik.

Jika berfungsi dengan versi 1.1.0, gunakan perintah npm i @ agm / [email protected]

jesuschavez1994 pada 2 Sep 2020

👎1

Kapan ini akan dirilis?

ahmadalfy pada 12 Okt 2020

👍5

Mengalami masalah yang sama di "@ agm / core": "^ 3.0.0-beta.0"

paishin pada 14 Des 2020

@ egorkel-da14 Saya mencoba solusi Anda tetapi mendapatkan pesan ini:
Uncaught TypeError: Cannot read property 'run' of undefined
saat menelepon this.zone.run(...)

Apakah saya melewatkan sesuatu di sini?

update: Sepertinya saya bisa mendapatkan koordinat saat menghilangkan garis itu:

    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());
        });
    }

paishin pada 14 Des 2020

@ egorkel-da14 Saya mencoba solusi Anda tetapi mendapatkan pesan ini:
Uncaught TypeError: Cannot read property 'run' of undefined
saat menelepon this.zone.run(...)
Apakah saya melewatkan sesuatu di sini?
update: Sepertinya saya bisa mendapatkan koordinat saat menghilangkan garis itu:
    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());
        });
    }

Iya :)
Anda perlu menyuntikkan layanan NgZone ke konstruktor

constructor(private zone: NgZone) {}

egorkel-da14 pada 14 Des 2020

👍1

Anda memerlukan baris ini untuk pekerjaan yang tepat dari deteksi perubahan sudut (untuk pembaruan tampilan yang tepat)
@paul

egorkel-da14 pada 14 Des 2020

panggil event.latLng.lat () working
markerDragEnd ($ event: any) {
console.log ($ event.latLng.lat (), $ event.latLng.lng ());
}

chaleawmut pada 29 Jan 2021

Saya memiliki masalah yang sama dengan fungsi addPin, tetapi saya perlu menggunakan versi 3.0.0 untuk menerjemahkan peta sesuai dengan lokal pengguna. Jadi yang perlu saya ketahui adalah versi dengan terjemahan dan fungsi menambahkan pin diterbitkan sebelumnya atau tidak? (karena di versi 1.1.0 terjemahan masih belum tersedia)

panimat pada 3 Feb 2021

Adakah yang bisa memperbaiki masalah ini?
Saya menyarankan menggunakan versi lama untuk saat ini, karena bug ini sangat penting, menyangkal interaksi dasar dengan peta
Ya, versi yang lebih lama 1.1.0 (8 bulan yang lalu) berfungsi dengan baik.
Jika berfungsi dengan versi 1.1.0, gunakan perintah npm i @ agm / [email protected]

Dengan Angular 10?

munozdaniel pada 18 Mar 2021

Sebagai solusinya, Anda dapat menambahkan pendengar ke contoh peta 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();
  }
}

Terima kasih banyak untuk kode ini, sangat membantu, semoga harimu menyenangkan