问题描述
我像这样使用 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 一起使用?
非常感谢帮助和建议。
解决方法
我遇到了同样的问题,我在其他论坛中发现回滚 googlemaps 的版本修复了它。我运行了以下命令,我能够看到它按预期工作。
npm i @types/googlemaps@3.39.13 --save-dev
,
抱歉回复晚了。我选择使用 Angular 中的 google-map 组件,它在 Angular 11+ 中运行良好
您可以在此处找到更多信息:
https://github.com/angular/components/tree/master/src/google-maps#readme
感谢您对 AGM 问题提出的所有意见和建议。
但是,我停止使用 AGM,转而使用 google-map 组件。它更有意义,因为它直接在 Angular 中得到支持。所以不幸的是,我无法确认建议的解决方案是否适用于 AGM。
如果您在 Angular 11+ 中遇到 AGM 问题,我建议您改用 google-map