IONIC 中没有 MapsAPILoader 的提供者

Posted 2023-03-13

【中文标题】IONIC 中没有 MapsAPILoader 的提供者

【英文标题】：No provider for MapsAPILoader in IONIC

【发布时间】：2017-12-28 16:28:50

【问题描述】：

目的是用谷歌地图显示搜索。

我在 ionic/angular 项目中遇到了这个错误

运行时错误 没有 MapsAPILoader 的提供者！ 堆 错误：没有 MapsAPILoader 的提供者！ 在 injectionError (http://localhost:8103/build/main.js:1655:86) 在 noProviderError (http://localhost:8103/build/main.js:1693:12) 在 ReflectiveInjector_._throwOrNull (http://localhost:8103/build/main.js:3194:19) 在 ReflectiveInjector_._getByKeyDefault (http://localhost:8103/build/main.js:3233:25) 在 ReflectiveInjector_._getByKey (http://localhost:8103/build/main.js:3165:25) 在 ReflectiveInjector_.get (http://localhost:8103/build/main.js:3034:21) 在 AppModuleInjector.NgModuleInjector.get (http://localhost:8103/build/main.js:3981:52) 在 resolveDep (http://localhost:8103/build/main.js:11441:45) 在 createClass (http://localhost:8103/build/main.js:11305:32) 在 createDirectiveInstance (http://localhost:8103/build/main.js:11125:37)

在 app.module 中

从'@agm/core'导入AgmCoreModule； 从“angular2-google-maps/core/services/google-maps-api-wrapper”导入GoogleMapsAPIWrapper； 进口：[ AgmCoreModule.forRoot( apiKey：'*******'，库：["places"] ) ]

然后在组件页面中

从'angular2-google-maps/core'导入MapsAPILoader； 构造函数（私有 mapsAPILoader：MapsAPILoader） this.mapsAPILoader.load().then(() => 让自动完成 = 新 google.maps.places.Autocomplete(this.searchElementRef.nativeElement, 类型：[“地址”] ); autocomplete.addListener("place_changed", () => this.ngZone.run(() => //获取位置结果 让地点：google.maps.places.PlaceResult = autocomplete.getPlace(); //验证结果 if (place.geometry === undefined || place.geometry === null) 返回; this.latitude = place.geometry.location.lat(); this.longitude = place.geometry.location.lng(); this.zoom = 12; ); ); );

html页面

    <div class="form-group">
                            <input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
                        </div>
                        <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
                            <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
                        </agm-map>
                        

所以.. 我不知道会发生什么。在哪里找到提供者或我必须放在哪里。

【参考方案1】：

改变

import MapsAPILoader from 'angular2-google-maps/core';

到

import MapsAPILoader from '@agm/core';

【讨论】：

我需要从 MapsApiLoader 加载来从 API 加载服务

尝试import MapsAPILoader from '@agm/core'; 而不是import MapsAPILoader from 'angular2-google-maps/core';

这是正确的答案 import MapsAPILoader from '@agm/core';请张贴以标记正确

【参考方案2】：

您需要在app.module.ts 中将 MapsAPIWrapper 声明为提供程序。在此之后，您可以在页面的构造函数中初始化提供程序，如下所示：constructor (private mapsApi: MapsAPIWrapper) 。

【讨论】：

你的意思是 GoogleMapsAPIWrapper 吗？如果是这样，那么已经尝试过了。

你能分享一下 GoogleMapsAPIWrapper 吗？我不知道，所以我不能给你更多的信息。但问题是，您在组件中使用MapsAPIWrapper，这意味着您需要在app.module.ts 中将MapsAPIWarpper 声明为提供者！

【参考方案3】：

检查你是否在 app.module 中添加了这个导入

AgmCoreModule.forRoot(
  apiKey: 'key' 
),