Angular-google-maps: AGM mapClick ($ event) funktioniert nicht richtig

Erstellt am 24. Juli 2020  ·  20Kommentare  ·  Quelle: SebastianM/angular-google-maps

Ich habe das Tutorial Erste Schritte mit der Hauptversammlung erstellt: https://angular-maps.com/guides/getting-started/

Ich installierte:
"@ angle / core": "~ 10.0.0"
und
"@ agm / core": "^ 3.0.0-beta.0"

In app.component.html habe ich hinzugefügt:


In app.component.ts habe ich hinzugefügt:
Exportklasse AppComponent {
title = 'gbis';
lat = 51,678418;
lng = 7,809007;

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

}}

In app.component.css habe ich hinzugefügt:
agm-map {
Höhe: 300px;
}}

Wenn ich diese App starte, funktioniert die Karte, aber wenn ich in der TS-Dateifunktion mapClick (e) auf die Karte klicke, erhalte ich e = "c". Keine Parameter aus Parameter e empfangen.

bitte helfen!

urgent bug

Hilfreichster Kommentar

Als Problemumgehung können Sie der Google Map-Instanz einen Listener hinzufügen

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

Alle 20 Kommentare

ETA zu diesem Fix? oder Problemumgehung?

Ich bin auf genau das gleiche Problem gestoßen.

Könnte jemand dieses Problem beheben?

Müssen Sie eine ältere Version verwenden, um dies zu umgehen?

Könnte jemand dieses Problem beheben?

Könnte jemand dieses Problem beheben?

Ich schlage vor, vorerst eine ältere Version zu verwenden, da dieser Fehler kritisch ist und die grundlegende Interaktion mit der Karte negiert

Könnte jemand dieses Problem beheben?

Ich schlage vor, vorerst eine ältere Version zu verwenden, da dieser Fehler kritisch ist und die grundlegende Interaktion mit der Karte negiert

Ja, die vorherige Version 1.1.0 (vor 8 Monaten) funktioniert einwandfrei.

Einfache Korrektur bei # 1847 und Warten auf eine Bewertung von @SebastianM

Ich habe das gleiche Problem. $ event in mapClick gibt eine Zeichenfolge "c" zurück. Irgendeine Idee, wann dies behoben wird? Gibt es eine andere Lösung als die Umstellung auf eine ältere Version?

Als Problemumgehung können Sie der Google Map-Instanz einen Listener hinzufügen

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

Könnte jemand dieses Problem beheben?

Ich schlage vor, vorerst eine ältere Version zu verwenden, da dieser Fehler kritisch ist und die grundlegende Interaktion mit der Karte verweigert

Ja, die ältere Version 1.1.0 (vor 8 Monaten) funktioniert einwandfrei.

Wenn es mit Version 1.1.0 funktioniert, verwenden Sie den Befehl npm i @ agm / [email protected]

Wann wird dies veröffentlicht?

Das gleiche Problem bei "@ agm / core": "^ 3.0.0-beta.0"

@ egorkel-da14 Ich versuche Ihre Problemumgehung, erhalte aber folgende Meldung:
Uncaught TypeError: Cannot read property 'run' of undefined
beim Aufruf von this.zone.run(...)

Vermisse ich hier etwas?

Update: Es scheint, dass ich die Koordinaten erhalten kann, wenn ich diese Zeile weglasse:

    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 Ich versuche Ihre Problemumgehung, erhalte aber folgende Meldung:
Uncaught TypeError: Cannot read property 'run' of undefined
beim Aufruf von this.zone.run(...)

Vermisse ich hier etwas?

Update: Es scheint, dass ich die Koordinaten erhalten kann, wenn ich diese Zeile weglasse:

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

Ja :)
Sie müssen dem Konstruktor den NgZone-Dienst hinzufügen

constructor(private zone: NgZone) {}

Sie benötigen diese Zeile für die ordnungsgemäße Ausführung der Winkeländerungserkennung (für die ordnungsgemäße Aktualisierung der Ansicht).
@ Paishin

Rufen Sie event.latLng.lat () auf
markerDragEnd ($ event: any) {
console.log ($ event.latLng.lat (), $ event.latLng.lng ());
}}

Ich habe das gleiche Problem mit der Funktion addPin, aber ich muss Version 3.0.0 verwenden, um eine Übersetzung für Karten gemäß dem Gebietsschema des Benutzers zu erhalten. Ich muss also wissen, ob die Version mit Übersetzung und Pin-Funktionalität früher veröffentlicht wurde oder nicht. (weil in Version 1.1.0 die Übersetzung noch nicht verfügbar ist)

Könnte jemand dieses Problem beheben?

Ich schlage vor, vorerst eine ältere Version zu verwenden, da dieser Fehler kritisch ist und die grundlegende Interaktion mit der Karte verweigert

Ja, die ältere Version 1.1.0 (vor 8 Monaten) funktioniert einwandfrei.

Wenn es mit Version 1.1.0 funktioniert, verwenden Sie den Befehl npm i @ agm / [email protected]

Mit Angular 10?

Als Problemumgehung können Sie der Google Map-Instanz einen Listener hinzufügen

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

Vielen Dank für diesen Code, er ist sehr hilfreich und hat einen schönen Tag

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen