Angular-google-maps: AGM mapClick ($ event) no funciona correctamente

Creado en 24 jul. 2020  ·  20Comentarios  ·  Fuente: SebastianM/angular-google-maps

Hice el tutorial Getting Started AGM: https://angular-maps.com/guides/getting-started/

Lo instalé:
"@ angular / core": "~ 10.0.0"
y
"@ agm / core": "^ 3.0.0-beta.0"

En app.component.html agregué:


En app.component.ts agregué:
export class AppComponent {
título = 'gbis';
lat = 51,678418;
lng = 7,809007;

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

}

En app.component.css agregué:
agm-map {
altura: 300px;
}

Cuando ejecuto esta aplicación, el mapa funciona, pero si hago clic en el mapa en la función de archivo TS mapClick (e) recibo e = "c". No se reciben coordenadas del parámetro e.

¡por favor ayuda!

urgent bug

Comentario más útil

Como solución alternativa, puede agregar un oyente a la instancia del mapa de 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();
  }
}

Todos 20 comentarios

¿ETA en esta solución? o solución alternativa?

Encontré exactamente el mismo problema.

¿Alguien podría solucionar este problema?

mismo problema, ¿tiene que usar una versión anterior para solucionar esto?

¿Alguien podría solucionar este problema?

¿Alguien podría solucionar este problema?

Sugiero usar una versión anterior por ahora, ya que este error es crítico, negando la interacción básica con el mapa.

¿Alguien podría solucionar este problema?

Sugiero usar una versión anterior por ahora, ya que este error es crítico, negando la interacción básica con el mapa.

Sí, la versión anterior 1.1.0 (hace 8 meses) funciona bien.

solución simple en # 1847, esperando una revisión de @SebastianM

Me encuentro con el mismo problema. $ event en mapClick devuelve una cadena "c". ¿Alguna idea de cuándo se solucionará esto? ¿Alguna solución que no sea cambiar a una versión anterior?

Como solución alternativa, puede agregar un oyente a la instancia del mapa de 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();
  }
}

¿Alguien podría solucionar este problema?

sugiero usar una versión anterior por ahora, ya que este error es crítico, negando la interacción básica con el mapa

Sí, la versión anterior 1.1.0 (hace 8 meses) funciona bien.

Si funciona con la versión 1.1.0, usar el comando npm i @agm/[email protected]

¿Cuándo saldrá a la venta?

Tener el mismo problema en "@ agm / core": "^ 3.0.0-beta.0"

@ egorkel-da14 Estoy probando su solución pero recibo este mensaje:
Uncaught TypeError: Cannot read property 'run' of undefined
al llamar this.zone.run(...)

¿Me estoy perdiendo de algo?

actualización: Parece que puedo obtener las coordenadas al omitir esa línea:

    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 Estoy probando su solución pero recibo este mensaje:
Uncaught TypeError: Cannot read property 'run' of undefined
al llamar this.zone.run(...)

¿Me estoy perdiendo de algo?

actualización: Parece que puedo obtener las coordenadas al omitir esa línea:

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

Sí :)
necesitas inyectar el servicio NgZone al constructor

constructor(private zone: NgZone) {}

Necesita esta línea para el trabajo adecuado de detección de cambios angulares (para una actualización de vista adecuada)
@paishin

llamar a event.latLng.lat () trabajando
markerDragEnd ($ evento: cualquiera) {
console.log ($ event.latLng.lat (), $ event.latLng.lng ());
}

Tengo el mismo problema con la función addPin, pero necesito usar la versión 3.0.0 para tener la traducción de los mapas según la configuración regional del usuario. Entonces, necesito saber si la versión con traducción y agregar funcionalidad de pin se publicó antes o no. (porque en la versión 1.1.0 la traducción aún no está disponible)

¿Alguien podría solucionar este problema?

sugiero usar una versión anterior por ahora, ya que este error es crítico, negando la interacción básica con el mapa

Sí, la versión anterior 1.1.0 (hace 8 meses) funciona bien.

Si funciona con la versión 1.1.0, usar el comando npm i @agm/[email protected]

With Angular 10 ?

Como solución alternativa, puede agregar un oyente a la instancia del mapa de 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();
  }
}

Muchas gracias por este código, es muy útil, que tengas un gran día.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

ChrisDevinePimss picture ChrisDevinePimss  ·  3Comentarios

supran2811 picture supran2811  ·  4Comentarios

gnujeremie picture gnujeremie  ·  3Comentarios

PeterSisovsky picture PeterSisovsky  ·  3Comentarios

alexweber picture alexweber  ·  4Comentarios