无法让 Angular Google Map AGM 与 Angular 11 一起使用答案

【问题标题】：Trouble getting Angular Google Map AGM to work with Angular 11无法让 Angular Google Map AGM 与 Angular 11 一起使用
【发布时间】：2021-05-11 17:33:26
【问题描述】：

我像这样使用 npm 安装了 agm/core：

npm install @agm/core

显示以下警告：

npm WARN @agm/core@3.0.0-beta.0 requires a peer of @angular/common@^9.1.0 || ^10.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @agm/core@3.0.0-beta.0 requires a peer of @angular/core@^9.1.0 || ^10.0.0 but none is installed. You must install peer dependencies yourself.

我仍然继续，并按照这样的文档将 AgmCoreModule 导入 AppModule：

AgmCoreModule.forRoot({
      apiKey: 'MY MAP KEY',
      libraries: ['places']
    })

但是，当尝试使用 ng serve 为应用提供服务时，会出现以下错误：

Error: node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts:50:41 - error TS2314: Generic type 'MapHandlerMap<T>' requires 1 type argument(s).
50     subscribeToMapEvent<N extends keyof google.maps.MapHandlerMap>(eventName: N): Observable<google.maps.MapHandlerMap[N]>;
                                           ~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@agm/core/lib/services/google-maps-api-wrapper.d.ts:50:94 - error TS2314: Generic type 'MapHandlerMap<T>' requires 1 type argument(s).
50     subscribeToMapEvent<N extends keyof google.maps.MapHandlerMap>(eventName: N): Observable<google.maps.MapHandlerMap[N]>;
                                                                                                ~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@agm/core/lib/services/managers/marker-manager.d.ts:25:93 - error TS2694: Namespace 'google.maps' has no exported member 'MarkerMouseEventNames'.

25     createEventObservable<T extends (google.maps.MouseEvent | void)>(eventName: google.maps.MarkerMouseEventNames | google.maps.MarkerChangeOptionEventNames, marker: AgmMarker): Observable<T>;
                                                                                               ~~~~~~~~~~~~~~~~~~~~~
node_modules/@agm/core/lib/services/managers/marker-manager.d.ts:25:129 - error TS2694: Namespace 'google.maps' has no exported member 'MarkerChangeOptionEventNames'.39m

25     createEventObservable<T extends (google.maps.MouseEvent | void)>(eventName: google.maps.MarkerMouseEventNames | google.maps.MarkerChangeOptionEventNames, marker: AgmMarker): Observable<T>;

我已经在现有的 Angular 7 应用程序上进行了这项工作。但我正在尝试升级到 Angular 11，但无法让 @agm/core 正常工作。

我也知道一个官方的 Angular google-map 组件，但我需要使用似乎与 agm 很好地集成的自动完成功能，并且找不到任何文档来使用 google-map 组件执行此操作。

有没有人成功地将 @agm/core 与 Angular 11 一起使用？
非常感谢您的帮助和建议。

【问题讨论】：

标签： angular angular-google-maps angular11 agm

【解决方案1】：

我遇到了同样的问题，我在其他论坛中发现回滚 googlemaps 版本修复了它。我运行了以下命令，并且能够看到它按预期工作。

npm i @types/googlemaps@3.39.13 --save-dev

【讨论】：

为了清楚起见，您在 Angular 11 中使用过这个？我仍然无法在 Angular 11 中安装 agm/core
使用 Angular 12。
澄清一下，这个库和 AGM 一样吗？
嘿，@jjaur's 你试过得到什么结果了吗？因为我对 agm 有同样的问题。 -- 编辑了npm i @types/googlemaps@3.39.13 --save-dev也出现错误
嘿，@Satrughna 我在使用建议的解决方案时得到了结果。这是工作。希望对你有帮助

【解决方案2】：

抱歉，回复晚了。我选择使用 Angular 的 google-map 组件，该组件在 Angular 11+ 中运行良好

您可以在此处找到更多信息：
https://github.com/angular/components/tree/master/src/google-maps#readme

感谢您针对 AGM 问题提供的所有 cmets 和建议。
但是，我停止使用 AGM，转而使用 google-map 组件。它更有意义，因为它直接在 Angular 中得到支持。所以不幸的是，我无法确认建议的解决方案是否适用于 AGM。

如果您在 Angular 11+ 中遇到 AGM 问题，我建议您改用 google-map

【讨论】：