Question

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

在处理了这个问题并在几个论坛上发生此错误并实现每个npm安装后，两者都是--save-dev to global。

- 我已经在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 /页/自动填充/ 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

我知道我有点晚了但我也遇到同样的问题。我做的是

首先我安装了打字机 npm install -g typings@latest

在linux上可能

sudo npm install -g typings@latest
下一步是安装google maps typings：

typings install dt~google.maps --global
然后我必须将以下行添加到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

Ionic2`service = new google.maps.places.AutocompleteService（）`＆lt; =找不到'google'

的package.json

的src /页/自动填充/ autocomplete.ts

2 个答案: