没有IONIC中MapsAPILoader的提供者-Java 学习之路

目标是用谷歌 Map 显示搜索 .

我在离子/角度项目中遇到了这个错误

Runtime Error
    No provider for MapsAPILoader!
    Stack
    Error: No provider for MapsAPILoader!
        at injectionError (http://localhost:8103/build/main.js:1655:86)
        at noProviderError (http://localhost:8103/build/main.js:1693:12)
        at ReflectiveInjector_._throwOrNull (http://localhost:8103/build/main.js:3194:19)
        at ReflectiveInjector_._getByKeyDefault (http://localhost:8103/build/main.js:3233:25)
        at ReflectiveInjector_._getByKey (http://localhost:8103/build/main.js:3165:25)
        at ReflectiveInjector_.get (http://localhost:8103/build/main.js:3034:21)
        at AppModuleInjector.NgModuleInjector.get (http://localhost:8103/build/main.js:3981:52)
        at resolveDep (http://localhost:8103/build/main.js:11441:45)
        at createClass (http://localhost:8103/build/main.js:11305:32)
        at createDirectiveInstance (http://localhost:8103/build/main.js:11125:37)

在app.module中

import {AgmCoreModule} from '@agm/core';
    import {GoogleMapsAPIWrapper} from "angular2-google-maps/core/services/google-maps-api-wrapper";


     imports: [
            AgmCoreModule.forRoot({
                apiKey: '*******', libraries: ["places"]
            }) 
          ]

然后在组件页面中

import {MapsAPILoader} from 'angular2-google-maps/core';
    constructor(private mapsAPILoader:MapsAPILoader) {


     this.mapsAPILoader.load().then(() => {
            let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
                types: ["address"]
            });
            autocomplete.addListener("place_changed", () => {
                this.ngZone.run(() => {
                    //get the place result
                    let place:google.maps.places.PlaceResult = autocomplete.getPlace();

                    //verify result
                    if (place.geometry === undefined || place.geometry === null) {
                        return;
                    }

                    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>

所以..我没有任何想法会发生什么 . 找到提供者或我必须放置的地方 .

2 回答

更改

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

至

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

回复于 2024-05-14T17:20:24+08:00

1

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

回复于 2024-05-14T17:20:24+08:00

没有IONIC中MapsAPILoader的提供者

2 回答

相关问题