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 {
title ='gbis';
lat = 51.678418;
lng = 7.809007;

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

}

在app.component.css中,我添加了:
agm-map {
高度:300像素;
}

当我运行此应用程序时,地图正在运行,但是如果我在TS文件功能mapClick(e)中单击地图,则会收到e =“ c”。 没有从参数e接收到坐标。

请帮忙!

urgent bug

最有用的评论

解决方法是,您可以将侦听器添加到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();
  }
}

所有20条评论

ETA可以解决此问题吗? 或解决方法?

我遇到了完全相同的问题。

谁能解决这个问题?

同样的问题,必须使用较旧的版本来解决此问题?

谁能解决这个问题?

谁能解决这个问题?

我建议暂时使用较旧的版本,因为此错误非常严重,因此无法与地图进行基本交互

谁能解决这个问题?

我建议暂时使用较旧的版本,因为此错误非常严重,因此无法与地图进行基本交互

是的,以前的版本1.1.0(8个月前)可以正常工作。

在#1847处进行简单修复,等待@SebastianM进行审查

我遇到了同样的问题。 mapClick中的$ event返回字符串“ c”。 知道什么时候可以解决? 除了转移到较旧的版本以外,还有其他解决方案吗?

解决方法是,您可以将侦听器添加到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();
  }
}

谁能解决这个问题?

我建议暂时使用旧版本,因为此错误很关键,它拒绝与地图进行基本交互

是的,较旧的版本1.1.0(8个月前)可以正常工作。

如果适用于1.1.0版,请使用命令npm i @ agm /

什么时候发布?

在“ @ 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版,请使用命令npm i @ agm /

使用Angular 10吗?

解决方法是,您可以将侦听器添加到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();
  }
}

非常感谢您提供的这段代码,对您很有帮助,祝您有愉快的一天

此页面是否有帮助?
0 / 5 - 0 等级