IONIC 中没有 MapsAPILoader 的提供者答案

【问题标题】：No provider for MapsAPILoader in IONICIONIC 中没有 MapsAPILoader 的提供者
【发布时间】：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>

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

【问题讨论】：

标签： angular google-maps typescript ionic-framework

【解决方案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' 
}),

【讨论】：