使用Google Maps到ionic 3时遇到未定义的提供程序错误

Question

我正在尝试使用 https://ionicthemes.com/tutorials/about/ionic-2-google-maps-google-places-geolocation 将google map添加到ionic3.9.2项目。首先， 找不到谷歌名称 的问题，然后使用https://forum.ionicframework.com/t/google-maps-typescript-error-cannot-find-name-google-discussion/49990/39解决了这个问题。但是现在我面临一个新的错误，如下图。注意：奇怪的是，Visual Studio没有显示任何错误。

我也使用了Error: "Encountered undefined provider! Usually this means you have a circular dependencies"链接，但没有帮助。 在这里，我要上传我的打字稿课。 `

import { Component, NgZone, Injectable } from '@angular/core';
import { GeolocationOriginal } from '@ionic-native/geolocation';
import { LoadingController } from 'ionic-angular';
import { google } from "google-maps";

declare var google : google;

@Component({
  selector: 'page-get-address',
  templateUrl: 'get-address.html',
})

export class GetAddressPage {
  google: google;
  map: any;
  markers: any;
  autocomplete: any;
  GoogleAutocomplete: any;
  GooglePlaces: any;
  geocoder: any
  autocompleteItems: any;
  loading: any;

  constructor(
    public zone: NgZone,
    public geolocation: GeolocationOriginal,
    public loadingCtrl: LoadingController
  ) {
    this.geocoder = new google.maps.Geocoder;
    let elem = document.createElement("div")
    this.GooglePlaces = new google.maps.places.PlacesService(elem);
    this.GoogleAutocomplete = new google.maps.places.AutocompleteService();
    this.autocomplete = {
      input: ''
    };
    this.autocompleteItems = [];
    this.markers = [];
    this.loading = this.loadingCtrl.create();
  }

  ionViewDidEnter() {
    // let infoWindow = new google.maps.InfoWindow({map: map});
    //Set latitude and longitude of some place
    this.map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: -34.9011, lng: -56.1645 },
      zoom: 15
    });
  }

  tryGeolocation() {
    this.loading.present();
    this.clearMarkers();//remove previous markers

    this.geolocation.getCurrentPosition().then((resp) => {
      let pos = {
        lat: resp.coords.latitude,
        lng: resp.coords.longitude
      };
      let marker = new google.maps.Marker({
        position: pos,
        map: this.map,
        title: 'I am here!'
      });
      this.markers.push(marker);
      this.map.setCenter(pos);
      this.loading.dismiss();

    }).catch((error) => {
      console.log('Error getting location', error);
      this.loading.dismiss();
    });
  }

  updateSearchResults() {
    if (this.autocomplete.input == '') {
      this.autocompleteItems = [];
      return;
    }
    this.GoogleAutocomplete.getPlacePredictions({ input: this.autocomplete.input },
      (predictions, status) => {
        this.autocompleteItems = [];
        if (predictions) {
          this.zone.run(() => {
            predictions.forEach((prediction) => {
              this.autocompleteItems.push(prediction);
            });
          });
        }
      });
  }

  selectSearchResult(item) {
    this.clearMarkers();
    this.autocompleteItems = [];

    this.geocoder.geocode({ 'placeId': item.place_id }, (results, status) => {
      if (status === 'OK' && results[0]) {
        // let position = {
        //     lat: results[0].geometry.location.lat,
        //     lng: results[0].geometry.location.lng
        // };
        let marker = new google.maps.Marker({
          position: results[0].geometry.location,
          map: this.map
        });
        this.markers.push(marker);
        this.map.setCenter(results[0].geometry.location);
      }
    })
  }

  clearMarkers() {
    for (var i = 0; i < this.markers.length; i++) {
      console.log(this.markers[i])
      this.markers[i].setMap(null);
    }
    this.markers = [];
  }

}

` 让我知道是否也需要上传module.ts代码，我们将不胜感激。