Angular集成Google Maps点击获取经纬度报错：Cannot read 'lat'

问题重现 #

在Angular项目中集成AGM（Angular Google Maps）后，地图可正常显示，但添加点击地图获取经纬度的功能时，持续报错：Cannot read properties of undefined (reading 'lat')。

组件代码 #

export class AppComponent {
  title = 'PI';
  latitude = 51.678418;
  longitude = 7.809007;
  locationChosen = false;

  onChoseLocation(event) {
    this.latitude = event.coords.lat;
    this.longitude = event.coords.lng;
    this.locationChosen = true;
  }
}

HTML代码 #

<agm-map [latitude]="latitude" [longitude]="longitude" (mapClick)="onChoseLocation($event)">
  <agm-marker [latitude]="latitude" [longitude]="longitude" *ngIf="locationChosen"></agm-marker>
</agm-map>

错误原因 #

AGM的mapClick事件返回的是MapMouseEvent对象，该对象中没有coords属性，错误访问不存在的属性路径导致event.coords为undefined，进而读取lat时抛出错误。

解决方案 #

修改组件中的onChoseLocation方法，正确获取经纬度：

• 对于AGM v1.x及以上版本，MapMouseEvent对象包含latLng属性，通过lat()和lng()方法获取经纬度值；
• 若使用较新版本，也可直接读取latLng的lat/lng数值属性。

修改后的组件代码 #

export class AppComponent {
  title = 'PI';
  latitude = 51.678418;
  longitude = 7.809007;
  locationChosen = false;

  onChoseLocation(event: any) {
    this.latitude = event.latLng.lat();
    this.longitude = event.latLng.lng();
    this.locationChosen = true;
  }
}

备选方案（针对部分新版本AGM） #

如果上述方法仍报错，可尝试直接读取数值属性：

onChoseLocation(event: any) {
  this.latitude = event.latLng.lat;
  this.longitude = event.latLng.lng;
  this.locationChosen = true;
}

验证 #

修改后重新运行项目，点击地图即可正确获取经纬度并更新标记位置，不再抛出错误。

内容的提问来源于stack exchange，提问作者Aziz Lachkar