使用 Ionic 自动完成 Google Places api 模式 - “找不到名称 'google'。”

Question

我有一个离子项目，我试图让错误消息"Cannot find name 'google'." 消失。我尝试将谷歌地图 api 脚本放在页面的头部和底部，安装 ionic native google maps package、typings install dt~google.maps --global...奇怪的是模式正在运行（见图），但我首先需要关闭错误窗口。我的一个想法是我尝试运行npm install @types/googlemaps --save-dev，但收到错误消息：

npm WARN @angular/platform-server@2.2.1 requires a peer of @angular/core@2.2.1 but none was installed.
npm WARN @angular/platform-server@2.2.1 requires a peer of @angular/common@2.2.1 but none was installed.
npm WARN @angular/platform-server@2.2.1 requires a peer of @angular/compiler@2.2.1 but none was installed.
npm WARN @angular/platform-server@2.2.1 requires a peer of @angular/platform-browser@2.2.1 but none was installed.
npm WARN @angular/core@2.2.1 requires a peer of rxjs@5.0.0-beta.12 but none was installed.
npm WARN @angular/http@2.2.1 requires a peer of rxjs@5.0.0-beta.12 but none was installed.
npm WARN ionic-angular@2.0.0-rc.5 requires a peer of rxjs@5.0.0-beta.12 but none was installed.

我首先必须关闭如下所示的错误窗口才能看到该模式，因此 Google 必须正在加载。

我得到的代码来自以下教程，其他一些人似乎也遇到过类似的问题：http://devfanaticblog.com/google-maps-autocomplete-for-ionic-2-applications/

index.html 我已将其包含在头中：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=my_api_key&amp;libraries=places"></script>

home.ts

import { NavController, ModalController} from 'ionic-angular';
import { Component } from '@angular/core';
import {AutocompletePage} from './autocomplete';

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

export class HomePage {
  public address;

  constructor(public navCtrl: NavController, private modalCtrl: ModalController) {
    this.address = {
      place: ''
    };
  }

  showAddressModal () {
    let modal = this.modalCtrl.create(AutocompletePage);
    let me = this;
    modal.onDidDismiss(data => {
      this.address.place = data;
    });
    modal.present();
  }

}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label color="primary" stacked>Location</ion-label>
      <ion-input (click)="showAddressModal()" [(ngModel)]="address.place" type="text" placeholder="Enter Pickup Address"></ion-input>
    </ion-item>
  </ion-list>
</ion-content>

autocomplete.ts

import {Component, NgZone} from '@angular/core';
import {ViewController} from 'ionic-angular';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps';


@Component({
  templateUrl: './autocomplete.html'
})

export class AutocompletePage {
  public autocompleteItems;
  public autocomplete;
  public service = new google.maps.places.AutocompleteService();

  constructor (public viewCtrl: ViewController, private zone: NgZone) {
    this.autocompleteItems = [];
    this.autocomplete = {
      query: ''
    };
  }

  dismiss() {
    this.viewCtrl.dismiss();
  }

  chooseItem(item: any) {
    this.viewCtrl.dismiss(item);
  }

  updateSearch() {
    if (this.autocomplete.query == '') {
      this.autocompleteItems = [];
      return;
    }
    let me = this;
    this.service.getPlacePredictions({ input: this.autocomplete.query, componentRestrictions: {country: 'US'} }, function (predictions, status) {
      me.autocompleteItems = []; 
      me.zone.run(function () {
        predictions.forEach(function (prediction) {
          me.autocompleteItems.push(prediction.description);
        });
      });
    });
  }
}

autocomplete.html

<ion-header>
  <ion-toolbar>
    <ion-title>Enter address</ion-title>
    <ion-searchbar [(ngModel)]="autocomplete.query" [showCancelButton]="true" (ionInput)="updateSearch()" (ionCancel)="dismiss()"></ion-searchbar>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of autocompleteItems" autofocus tappable (click)="chooseItem(item)">
      {{ item }}
    </ion-item>
  </ion-list>
</ion-content>

我查看过的其他相关链接：

• https://forum.ionicframework.com/t/google-maps-typescript-error-cannot-find-name-google-discussion/49990
• https://forum.ionicframework.com/t/google-places-autocomplete-on-an-ion-input-component-in-ionic-2/52890
• Ionic 2 - Google places and Autocomplete location
• https://ionicallyspeaking.com/2016/06/07/google-places-autocomplete-and-ionic-2/
• https://www.joshmorony.com/integrating-google-maps-with-an-ionic-application/
• https://github.com/guillefd/ionic2-google-maps-autocomplete/
• How to install Typescript typings for google maps
• https://ionicframework.com/docs/native/google-maps/
• https://github.com/mapsplugin/cordova-plugin-googlemaps

Answer 1

解决方案很简单：

在declarations.d.ts:

declare module 'googlemaps';