“MouseEvent”类型上不存在属性“坐标”。在 Angular2-google-maps 标记事件中答案

【问题标题】：Property 'coords' does not exist on type 'MouseEvent'. In Angular2-google-maps marker event“MouseEvent”类型上不存在属性“坐标”。在 Angular2-google-maps 标记事件中
【发布时间】：2017-07-16 03:36:42
【问题描述】：

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

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

}

我在使用“ionic serve”为我的 ionic 2 应用程序提供服务时遇到编译时错误。

提前致谢，乙

【问题讨论】：

为什么鼠标点击应该有纬度/经度？听从编译器的建议

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

这只是 Typescript 的抱怨，因为 default MouseEvent interface 没有 coords 属性，但由于您使用的是 angular2-google-maps，所以您知道 coords 属性将在那里 (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) { ... }

【讨论】：

我收到此错误：“模块 '"@agm/core"' 没有导出的成员 'MouseEvent'。”
@Sebastián 你能查一下this Github issue吗？那里说“正确，而不是 MouseEvent，切换到 google.maps.MouseEvent”。

【解决方案2】：

指出默认 MouseEvent 没有 coords 属性是正确的。

但是 AGM 确实附带了自己的 MouseEvent 接口，该接口确实包含 coords 类型的 LatLngLiteral 属性，正如预期的那样。你只需要导入它：

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

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

【讨论】：

你说得对，感谢您指出这一点:) 我已经编辑了答案以包含此信息（尽管使用别名而不是按原样导入 MouseEvent）。跨度>
在导入包模块时出现错误 '"../../../node_modules/@agm/core/agm-core"' 没有导出的成员 'MouseEvent'

【解决方案3】：

检查您的@agm/core installed version。

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

【讨论】：