Angular-google-maps: AGM mapClick ($ event) ne fonctionne pas correctement

Créé le 24 juil. 2020  ·  20Commentaires  ·  Source: SebastianM/angular-google-maps

J'ai réalisé le tutoriel de mise en route de l'AGA: https://angular-maps.com/guides/getting-started/

J'ai installé:
"@ angular / core": "~ 10.0.0"
et
"@ agm / core": "^ 3.0.0-beta.0"

Dans app.component.html, j'ai ajouté:


Dans app.component.ts j'ai ajouté:
classe d'exportation AppComponent {
titre = 'gbis';
lat = 51,678418;
lng = 7,809007;

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

}

Dans app.component.css, j'ai ajouté:
agm-map {
hauteur: 300px;
}

Lorsque j'exécute cette application, la carte fonctionne mais si je clique sur la carte dans la fonction de fichier TS mapClick (e), je reçois e = "c". Aucune coordonnée reçue du paramètre e.

s'il vous plaît aidez!

urgent bug

Commentaire le plus utile

Pour contourner ce problème, vous pouvez ajouter un écouteur à l'instance de google map

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

Tous les 20 commentaires

ETA sur ce correctif? ou solution de contournement?

J'ai rencontré exactement le même problème.

Quelqu'un pourrait-il résoudre ce problème?

même problème, devez utiliser une version plus ancienne pour contourner ce problème?

Quelqu'un pourrait-il résoudre ce problème?

Quelqu'un pourrait-il résoudre ce problème?

Je suggère d'utiliser une version plus ancienne pour le moment, car ce bogue est critique, annulant l'interaction de base avec la carte

Quelqu'un pourrait-il résoudre ce problème?

Je suggère d'utiliser une version plus ancienne pour le moment, car ce bogue est critique, annulant l'interaction de base avec la carte

Oui, la version précédente 1.1.0 (il y a 8 mois) fonctionne bien.

correction simple à # 1847, en attente d'un examen de @SebastianM

Je rencontre le même problème. $ event dans mapClick renvoie une chaîne "c". Une idée du moment où cela sera corrigé? Une solution autre que le passage à une version plus ancienne?

Pour contourner ce problème, vous pouvez ajouter un écouteur à l'instance de google map

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

Quelqu'un pourrait-il résoudre ce problème?

Je suggère d'utiliser une version plus ancienne pour le moment, car ce bogue est critique, niant l'interaction de base avec la carte

Oui, l'ancienne version 1.1.0 (il y a 8 mois) fonctionne bien.

Si cela fonctionne avec la version 1.1.0, utilisez la commande npm i @ agm / [email protected]

Quand cela sera-t-il publié?

Avoir le même problème sur "@ agm / core": "^ 3.0.0-beta.0"

@ egorkel-da14 J'essaye votre solution de contournement mais je reçois ce message:
Uncaught TypeError: Cannot read property 'run' of undefined
lors de l'appel this.zone.run(...)

Est-ce que j'ai râté quelque chose?

mise à jour: il semble que je puisse obtenir les coordonnées en omettant cette ligne:

    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 J'essaye votre solution de contournement mais je reçois ce message:
Uncaught TypeError: Cannot read property 'run' of undefined
lors de l'appel this.zone.run(...)

Est-ce que j'ai râté quelque chose?

mise à jour: il semble que je puisse obtenir les coordonnées en omettant cette ligne:

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

Oui :)
vous devez injecter le service NgZone au constructeur

constructor(private zone: NgZone) {}

Vous avez besoin de cette ligne pour le bon fonctionnement de la détection de changement angulaire (pour une mise à jour correcte de la vue)
@paishin

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

J'ai le même problème avec la fonction addPin, mais je dois utiliser la version 3.0.0 pour avoir la traduction des cartes en fonction des paramètres régionaux de l'utilisateur. J'ai donc besoin de savoir si la version avec traduction et ajout de fonctionnalités d'épingle a été publiée plus tôt ou non? (car dans la version 1.1.0 traduire toujours pas disponible)

Quelqu'un pourrait-il résoudre ce problème?

Je suggère d'utiliser une version plus ancienne pour le moment, car ce bogue est critique, niant l'interaction de base avec la carte

Oui, l'ancienne version 1.1.0 (il y a 8 mois) fonctionne bien.

Si cela fonctionne avec la version 1.1.0, utilisez la commande npm i @ agm / [email protected]

Avec Angular 10?

Pour contourner ce problème, vous pouvez ajouter un écouteur à l'instance de google map

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

Merci beaucoup pour ce code, il est très utile, bonne journée

Cette page vous a été utile?
0 / 5 - 0 notes