命名空间“google.maps”没有导出成员“MouseEvent”

Question

我想将 Google Maps 与我的 Angular 项目集成。在试点版本中，我只是点击了这个链接https://angular-maps.com/guides/getting-started/。目前，我陷入了错误：

node_modules/@agm/core/lib/directives/map.d.ts:232:43 - error TS2694: Namespace 'google.maps' has no exported member 'MouseEvent'

232 mapDblClick: EventEmitter<google.maps.MouseEvent>;

我去了文件位置并得到了这个

    mapClick: EventEmitter<google.maps.MouseEvent | google.maps.IconMouseEvent>;
    /**
     * This event emitter gets emitted when the user right-clicks on the map (but not when they click
     * on a marker or infoWindow).
     */
    mapRightClick: EventEmitter<google.maps.MouseEvent>;
    /**
     * This event emitter gets emitted when the user double-clicks on the map (but not when they click
     * on a marker or infoWindow).
     */
    mapDblClick: EventEmitter<google.maps.MouseEvent>;
    /**

依赖项： npm install @agm/core npm i @types/googlemaps

Answer 1

我发现，如果您使用的是@agm/core. 更新到 Angular 11 时，我遇到了同样的错误。

看来，Angular 11 与@agm/core 3.0.0-beta.0（最新版本）结合使用时无法正常工作。尝试降级@agm/core到以前的版本1.1.0。这对我有用。

"dependencies": {
    "@agm/core": "^1.1.0"
}

Answer 2

它解决了在这个 github 响应中找到的解决方案

"dependencies": {
     "@angular/google-maps": "^11.0.0"
}

然后加

"devDependencies": {
     "@types/googlemaps": "3.39.14"
}    

Answer 3

伙计们，解决方案已经合并，

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/50565#issuecomment-759785211

尝试@types/googlemaps@3.43.2从npm.

Answer 4

我的 Angular 12 项目也出现了同样的错误，但在降级 @types/googlemaps 后它就可以工作了。

"dependencies": {
    "@agm/core": "^3.0.0-beta.0",
},
"devDependencies": {
    "@types/googlemaps": "^3.39.12",
}

Answer 5

我正在添加一个带有激进解决方案的新答案。

长话短说：

我摆脱了 agm/core 并将其替换为 ngx-autocomplete 包。在此过程中，我还将我的 Angular 更新为 v12，但这很可能没有必要。参考文章。

长版：

之前我需要使用2个包

• agm/core 获取在我的组件中提供 onAddressChange 的 google-map 版本，以便我可以获得 google 地点 ID、latLng 等
• Angular/google-maps 用于显示地址上带有标记的地图
• 这些包需要与 typescript@type/googlemaps包进行版本同步

在查看了各种答案后，我发现了很多值得关注的事情

• 版本号（存在或不存在“^”很重要）
• 将 @type 包放在依赖项中而不是 devDependency 中可能会有所帮助
• 将“googlemaps”添加到所有 tsconfig*.json（.app.json、.spec.json、tsconfig.json）中的 compilerOptions.types 数组中

尽管如此，并尝试了各种配置，我仍无法使其工作。看来我需要，为了修复我所有的错误，两者

• @types/googlemaps": >= 3.39.14
• @types/googlemaps": <= 3.39.12

出现类似错误

通用类型“MapHandlerMap”需要 1 个类型参数。

或者

命名空间“google.maps”没有导出成员“MouseEvent”

我的心态是这样的：不要降级版本直到找到好的版本，而是将所有内容都升级到最新版本（使用ng update它相当顺利），其中包括所有角度模块，然后摆脱不维护和不兼容的库/或已弃用。

事实证明，agm/core自己成了罪魁祸首。看看它已经卡了多久了3.0.0-beta.0，semver补丁版本beta.0已经是一个很大的暗示，你不应该使用这个包。

经过一番谷歌搜索后，我发现该ngx-google-places-autocomplete包的实现更加简单，并且提供了一个更简单的接口，只需实现一个处理程序（只需查看我在 tl;dr 中链接的文章 - 您可以在几秒钟）。它还与angular/google-maps类型包兼容，无需执行任何其他操作。

我提到我升级到了 Angular 12，但我相信您不需要这样做，并且 ngx-google-places-autocomplete 很可能可以与前角版本一起使用。只要摆脱agm即可。