IONIC 中没有 MapsAPILoader 的提供者

Question

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

我在离子/角度项目中遇到此错误

    运行时错误
    没有 MapsAPILoader 的提供者！
    堆
    错误：没有 MapsAPILoader 的提供程序！
        在注入错误（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：'********'，库：[“地点”]
            }) 
          ]

然后在组件页面

    从 'angular2-google-maps/core' 导入 {MapsAPILoader}；
    构造函数（私有mapsAPILoader：MapsAPILoader）{


     this.mapsAPILoader.load().then(() => {
            让 autocomplete = new 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>
                        

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

Answer 1

您需要在

app.module.ts

中将 MapsAPIWrapper 声明为提供者。之后，您可以在页面的构造函数中初始化提供程序，如下所示：

constructor (private mapsApi: MapsAPIWrapper) {}

。

Answer 2

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

AgmCoreModule.forRoot({
  apiKey: 'key' 
}),

Answer 3

改变

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

到

import {MapsAPILoader} from '@agm/core';

Answer 4

import { MapsAPILoader } from '@agm/core';

providers: [
    {
      provide: MapsAPILoader,
      useValue: {
        load: () => import('@agm/core'),
      },
    },
]

尝试在您的模块或组件中使用上面的内容。对我来说它有效。