Angular-google-maps: AGM mapClick ($ event) não está funcionando corretamente

Criado em 24 jul. 2020  ·  20Comentários  ·  Fonte: SebastianM/angular-google-maps

Fiz o tutorial de primeiros passos do AGM: https://angular-maps.com/guides/getting-started/

Eu instalei:
"@ angular / core": "~ 10.0.0"
e
"@ agm / core": "^ 3.0.0-beta.0"

Em app.component.html, adicionei:


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

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

}

Em app.component.css, adicionei:
agm-map {
altura: 300px;
}

Quando executo este aplicativo, o mapa está funcionando, mas se eu clicar no mapa no arquivo TS de função mapClick (e), recebo e = "c". Nenhuma coordenada recebida do parâmetro e.

por favor ajude!

urgent bug

Comentários muito úteis

Como alternativa, você pode adicionar ouvinte à instância do mapa do 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 comentários

ETA nesta correção? ou solução alternativa?

Eu encontrei exatamente o mesmo problema.

Alguém poderia consertar esse problema?

mesmo problema, tem que usar uma versão mais antiga para contornar isso?

Alguém poderia consertar esse problema?

Alguém poderia consertar esse problema?

sugiro usar uma versão mais antiga por enquanto, uma vez que este bug é crítico, negando interação básica com o mapa

Alguém poderia consertar esse problema?

sugiro usar uma versão mais antiga por enquanto, uma vez que este bug é crítico, negando interação básica com o mapa

Sim, a versão anterior 1.1.0 (8 meses atrás) funciona bem.

correção simples em # 1847, esperando por uma revisão de @SebastianM

Estou encontrando o mesmo problema. $ event em mapClick retorna uma string "c". Alguma ideia de quando isso será consertado? Qualquer solução além de mudar para uma versão mais antiga?

Como alternativa, você pode adicionar ouvinte à instância do mapa do 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();
  }
}

Alguém poderia resolver esse problema?

Eu sugiro usar uma versão mais antiga por enquanto, pois esse bug é crítico, negando interação básica com o mapa

Sim, a versão anterior 1.1.0 (8 meses atrás) funciona bem.

Se funcionar com a versão 1.1.0, use o comando npm i @ agm /

Quando isso será lançado?

Tendo o mesmo problema em "@ agm / core": "^ 3.0.0-beta.0"

@ egorkel-da14 Estou tentando sua solução alternativa, mas recebo esta mensagem:
Uncaught TypeError: Cannot read property 'run' of undefined
ao ligar para this.zone.run(...)

Estou faltando alguma coisa aqui?

atualização: Parece que consigo obter as coordenadas ao omitir essa linha:

    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 Estou tentando sua solução alternativa, mas recebo esta mensagem:
Uncaught TypeError: Cannot read property 'run' of undefined
ao ligar para this.zone.run(...)

Estou faltando alguma coisa aqui?

atualização: Parece que consigo obter as coordenadas ao omitir essa linha:

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

Sim :)
você precisa injetar o serviço NgZone no construtor

constructor(private zone: NgZone) {}

Você precisa desta linha para um trabalho adequado de detecção de mudança angular (para uma atualização de vista adequada)
@paishin

chamar event.latLng.lat () trabalhando
marcadorDragEnd ($ event: any) {
console.log ($ event.latLng.lat (), $ event.latLng.lng ());
}

Tenho o mesmo problema com a função addPin, mas preciso usar a versão 3.0.0 para ter a tradução dos mapas de acordo com a localidade do usuário. Portanto, preciso saber se a versão com tradução e funcionalidade de adição de pin foi publicada anteriormente ou não? (porque na versão 1.1.0 a tradução ainda não está disponível)

Alguém poderia resolver esse problema?

Eu sugiro usar uma versão mais antiga por enquanto, pois esse bug é crítico, negando interação básica com o mapa

Sim, a versão anterior 1.1.0 (8 meses atrás) funciona bem.

Se funcionar com a versão 1.1.0, use o comando npm i @ agm /

Com o Angular 10?

Como alternativa, você pode adicionar ouvinte à instância do mapa do 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();
  }
}

Muito obrigado por este código, é muito útil, tenha um ótimo dia

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

maneesht picture maneesht  ·  3Comentários

ostapch picture ostapch  ·  4Comentários

Halynsky picture Halynsky  ·  3Comentários

alexweber picture alexweber  ·  4Comentários

supran2811 picture supran2811  ·  4Comentários