“MouseEvent"类型上不存在属性“coords".在 Angular2-google-maps 标记事件中 [英] Property 'coords' does not exist on type 'MouseEvent'. In Angular2-google-maps marker event

问题描述

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

I have added mapClicked event of angular2-google-maps map. The code is as below:

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

}

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

I am getting compile time error while serving my ionic 2 app with "ionic serve".

提前致谢，AB

推荐答案

这只是 Typescript 的抱怨，因为 默认 MouseEvent 接口 没有 coords 属性，但由于您使用的是 angular2-google-maps，您知道 >coords 属性将在那里(ng2 google maps MouseEventinterface) 这样您就可以通过使用 any 而不是 MouseEvent 来避免编译时错误，如下所示:

This is just Typescript complaining since the 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) so you can avoid that compile time error by just using any instead of MouseEvent like this:

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

<小时>

编辑

就像@Bruno Garcia 指出的那样，有更好的方法来解决这个问题将是从 AGM 库中导入正确的接口.这样您就可以为 MouseEvent 事件使用 IDE 的类型和自动完成功能.

Just like @Bruno Garcia pointed out, a better way to solve this would be to import the proper interface from the AGM library. That way you could use typings and the autocomplete feature of the IDE for that MouseEvent event.

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

But instead of importing the MouseEvent as he described in his answer, I'd prefer to use an alias, to avoid any confusion with the default MouseEvent interface:

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

然后只需使用该别名:

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

这篇关于“MouseEvent"类型上不存在属性“coords".在 Angular2-google-maps 标记事件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！