离子参考错误：谷歌未定义答案

【问题标题】：Ionic ReferenceError: google is not defined离子参考错误：谷歌未定义
【发布时间】：2022-11-07 15:46:52
【问题描述】：

我正在尝试查找用户输入的位置与固定位置之间的距离。我想使用谷歌平台的 DistanceMatrix 服务，但我不断收到“谷歌未定义”错误。

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AlertController, ToastController } from '@ionic/angular';
import { DataService } from '../data.service';

declare var google : any;
@Component({
  selector: 'app-checkout',
  templateUrl: './checkout.page.html',
  styleUrls: ['./checkout.page.scss'],
})
export class CheckoutPage {
  payment = ""
  name  : string  = ""
  phone : string = ""
  address  : string  = ""

  constructor(private alertController : AlertController, private router:Router, private dataService : DataService, private toastController : ToastController) { 



    var to = new google.maps.places.Autocomplete(document.getElementById("address") as HTMLInputElement)
  }

我还希望输入在用户键入时自动完成。

我已经坚持了3天了。任何帮助将不胜感激。

【问题讨论】：

你在Firefox中测试这个吗？所有浏览器的行为都相同吗？

标签： html angular typescript ionic-framework google-maps-api-3

【解决方案1】：

我会稍微延迟回答这个问题，但解决它的一种方法如下：

首先你需要安装 @types/googlemaps ：

npm install --save @types/googlemaps

然后，如果您使用的是 Angular-cli，请将 googlemaps 添加到 src/tsconfig.app.json 中的类型：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [
      "googlemaps"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

在那之后，你可能不会再有这个问题了。

来源：https://roufid.com/angular-uncaught-referenceerror-google-not-defined/

【讨论】：