Angular-google-maps: AGM mapClick($ event)が正しく機能していません

作成日 2020年07月24日  ·  20コメント  ·  ソース: SebastianM/angular-google-maps

入門AGMチュートリアルを作成しました: https

インストールしました:
"@ angular / core": "〜10.0.0"
そして
"@ agm / core": "^ 3.0.0-beta.0"

app.component.htmlに次を追加しました:


app.component.tsに次を追加しました:
エクスポートクラスAppComponent {
タイトル= 'gbis';
緯度= 51.678418;
lng = 7.809007;

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

}

app.component.cssに次を追加しました:
agm-map {
高さ:300px;
}

このアプリを実行すると地図は機能しますが、TSファイル関数mapClick(e)で地図をクリックすると、e = "c"が表示されます。 パラメータeから座標を受信して​​いません。

助けてください!

urgent bug

最も参考になるコメント

回避策として、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();
  }
}

全てのコメント20件

この修正に関するETA? または回避策?

まったく同じ問題が発生しました。

誰かがこの問題を修正できますか?

同じ問題、これを回避するには古いバージョンを使用する必要がありますか?

誰かがこの問題を修正できますか?

誰かがこの問題を修正できますか?

このバグは重大であり、マップとの基本的な相互作用を無効にするため、今のところ古いバージョンを使用することをお勧めします

誰かがこの問題を修正できますか?

このバグは重大であり、マップとの基本的な相互作用を無効にするため、今のところ古いバージョンを使用することをお勧めします

はい、以前のバージョン1.1.0(8か月前)は正常に機能します。

@SebastianMからのレビューを待っている#1847での簡単な修正

私は同じ問題に直面しています。 mapClickの$ eventは、文字列「c」を返します。 これがいつ修正されるかについて何か考えはありますか? 古いバージョンに移行する以外の解決策はありますか?

回避策として、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();
  }
}

誰かがこの問題を修正できますか?

このバグは重大であり、マップとの基本的な相互作用を拒否するため、今のところ古いバージョンを使用することをお勧めします

はい、古いバージョン1.1.0(8か月前)は正常に動作します。

それはバージョン1.1.0で動作する場合は、I @ AGM /コマンドNPMを使用し[email protected]

これはいつリリースされますか?

「@agm / core」で同じ問題が発生している:「^ 3.0.0-beta.0」

@ egorkel-da14回避策を試していますが、次のメッセージが表示されます。
Uncaught TypeError: Cannot read property 'run' of undefined
this.zone.run(...)呼び出すとき

ここで何かが足りませんか?

更新:その行を省略すると座標を取得できるようです:

    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回避策を試していますが、次のメッセージが表示されます。
Uncaught TypeError: Cannot read property 'run' of undefined
this.zone.run(...)呼び出すとき

ここで何かが足りませんか?

更新:その行を省略すると座標を取得できるようです:

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

はい :)
NgZoneサービスをコンストラクターに注入する必要があります

constructor(private zone: NgZone) {}

角度変化検出の適切な作業のためにこの行が必要です(適切なビューの更新のため)
@paishin

event.latLng.lat()が機能していると呼び出す
markerDragEnd($ event:any){
console.log($ event.latLng.lat()、$ event.latLng.lng());
}

addPin関数でも同じ問題がありますが、ユーザーロケールに応じてマップを変換するには、バージョン3.0.0を使用する必要があります。 だから私は翻訳と追加ピン機能を備えたバージョンが以前に公開されたかどうかを知る必要がありますか? (バージョン1.1.0ではまだ翻訳が利用できないため)

誰かがこの問題を修正できますか?

このバグは重大であり、マップとの基本的な相互作用を拒否するため、今のところ古いバージョンを使用することをお勧めします

はい、古いバージョン1.1.0(8か月前)は正常に動作します。

それはバージョン1.1.0で動作する場合は、I @ AGM /コマンドNPMを使用し[email protected]

Angular 10では?

回避策として、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();
  }
}

このコードをありがとうございました、それは非常に役に立ちます、素晴らしい一日を

このページは役に立ちましたか?
0 / 5 - 0 評価