Ionic2 `service = new google.maps.places.AutocompleteService()` <= 找不到 'google'

Question

编辑：将 var google : any; 添加到 autocomplete.ts 的全局范围内并没有解决问题，只是稍微推迟了一点。

在处理了这个问题并关注了几个论坛以解决这个错误并实施每个 npm 安装后，将 --save-dev 都设置为全局。

-我在 package.json devDependencies 中安装了google-maps 和 @types/googlemaps，我还安装了全局类型 npm，我后来用它来安装另一个 dt-google.maps 文件，我很漂亮一切都做了很多，它仍然显示cannot find 'google'。

我认为这是一个包装问题，如果我错了，请纠正我。

package.json

{
  "name": "githubIonic",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.1.0",
    "@angular/compiler": "4.1.0",
    "@angular/compiler-cli": "4.1.0",
    "@angular/core": "4.1.0",
    "@angular/forms": "4.1.0",
    "@angular/http": "4.1.0",
    "@angular/platform-browser": "4.1.0",
    "@angular/platform-browser-dynamic": "4.1.0",
    "@ionic-native/core": "3.7.0",
    "@ionic-native/splash-screen": "3.7.0",
    "@ionic-native/status-bar": "3.7.0",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.10"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.7",
    "@ionic/cli-plugin-ionic-angular": "1.2.0",
    "typescript": "2.2.1",
    "google-maps": "^3.2.1",
    "@types/googlemaps": "^3.26.11"

  },
  "description": "An Ionic project"
}

和

src/pages/autocomplete/autocomplete.ts

import { Component, NgZone } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import {ViewController} from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from 'ionic-native';
/**
 * Generated class for the AutocompletePage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-autocomplete',
  templateUrl: 'autocomplete.html',
})
export class AutocompletePage {
  autocompleteItems;
  autocomplete;

  service = new google.maps.places.AutocompleteService();

  constructor(public viewCtrl: ViewController, private zone: NgZone, public navCtrl: NavController, public navParams: NavParams) {
    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: 'TH'}
    }, function (predictions, status) {
      me.autocompleteItems = [];
      me.zone.run(function () {
        predictions.forEach(function (prediction) {
          me.autocompleteItems.push(prediction.description);
        });
      });
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AutocompletePage');
  }

}

Answer 1

我知道我来晚了，但我也有同样的问题。我所做的是

1. 首先我安装了typings npm install -g typings@latest

   在linux上可能

   sudo npm install -g typings@latest

2. 下一步是安装谷歌地图类型：

   typings install dt~google.maps --global

3. 然后我必须将以下行添加到 tsconfig.json 文件中

   在“包括”下：[
   // 类似 "src/**/*.ts"
   , "typings/*.d.ts" ]

Answer 2

在您的 index.html 中包含 Google Maps API

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>

然后在您的打字稿文件中声明 google var，见下文。

declare var google; @IonicPage() @Component({ selector: 'page-autocomplete', templateUrl: 'autocomplete.html', })

你也可以参考这个博客：Google Maps Autocomplete for Ionic 2 applications