属性 'coords' 在类型 'MouseEvent' 上不存在。在 Angular2-google-maps 标记事件中

Question

我添加了 angular2-google-maps 地图的 mapClicked 事件。代码如下：

mapClicked($event: MouseEvent) {
this.markers.push({
  lat: $event.coords.lat,
  lng: $event.coords.lng,
  draggable: false
});

}

我在使用 "ionic serve" 服务我的 ionic 2 应用程序时出现编译时错误。

提前致谢， AB

Answer 1

这只是 Typescript 自 default MouseEvent interface doesn't have the coords property, but since you're using angular2-google-maps you know the coords property will be there (ng2 google maps MouseEvent interface) 以来的抱怨，因此您可以通过使用 any 而不是 MouseEvent 来避免编译时错误，如下所示：

mapClicked($event: any) {
this.markers.push({
  lat: $event.coords.lat,
  lng: $event.coords.lng,
  draggable: false
});

编辑

就像 @Bruno Garcia 指出的那样，解决此问题的更好方法是从 AGM 库中导入正确的接口。这样你就可以为 MouseEvent 事件使用 IDE 的输入和自动完成功能。

但是我不想像他在回答中描述的那样导入 MouseEvent，我更愿意使用别名，以避免与 默认的 MouseEvent 接口混淆:

import { MouseEvent as AGMMouseEvent } from '@agm/core';

然后使用别名：

mapClicked($event: AGMMouseEvent) { ... }

Answer 2

接受的答案是正确的，指出默认的 MouseEvent 没有 coords 属性。

但 AGM 确实附带了自己的 MouseEvent 界面，该界面确实包含预期的 LatLngLiteral 类型的 coords 属性。你只需要导入它：

import {MouseEvent} from "@agm/core";

然后 TypeScript 的警告将消失，您将可以输入 $event 参数。

Answer 3

检查你的@agm/core installed version。

使用这个：
npm i @agm/core@1.1.0

属性 'coords' 在类型 'MouseEvent' 上不存在。在 Angular2-google-maps 标记事件中

Property 'coords' does not exist on type 'MouseEvent'. In Angular2-google-maps marker event

typescript

ionic-framework

ionic2

ionic3

angular