typescript 找不到名称'google' angular 8

3qpi33ja  于 2022-12-24  发布在  TypeScript
关注(0)|答案(3)|浏览(248)

因为它在构建过程中显示错误。
应用程序/页面/测试页面4/测试页面4.ts:27:27中出现错误-错误TS2304:找不到名称'google'。
27这个.地理编码器=新的谷歌.Map.地理编码器; ~~~~~~应用程序/页面/测试页面4/测试页面4.ts:29:32-错误TS2304:找不到名称'google'。
29 const自动完成=新的谷歌Map地点自动完成(这个搜索元素引用本地元素); ~~~~~~应用程序/页面/测试页面4/测试页面4.ts:33:24-错误TS2503:找不到命名空间“pay2000”。
33个常数位置:().~~~~~~
下面是我的代码。

import { Component, OnInit, ElementRef, ViewChild, NgZone } from '@angular/core';
import { MapsAPILoader } from '@agm/core';

@Component({
  selector: 'app',
  templateUrl: './TestPage4.html',
  styleUrls: ['./TestPage4.css']
})

export class TestPage4 implements OnInit {
  lat: number;
  lng: number;
  zoom = 1;
  private geoCoder;

  @ViewChild('search', { static: false})
  public searchElementRef: ElementRef;

  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone) {}

  ngOnInit() {
    //load Places Autocomplete
    
    this.mapsAPILoader.load().then(() => { 
      this.geoCoder = new google.maps.Geocoder;

      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          //get the place result
          const place: google.maps.places.PlaceResult = autocomplete.getPlace();
          console.log(place);
          //verify result
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          for (var i = 0; i < place.address_components.length; i++) {
            let addressType = place.address_components[i].types[0];
            //if (componentForm[addressType]) {
            //  var val = place.address_components[i][componentForm[addressType]];
            //  document.getElementById(addressType).value = val;
            //}
            // for the country, get the country code (the "short name") also
            console.log(addressType);
            if (addressType == "country") {
              console.log(place.address_components[i].short_name);
              console.log(place.address_components[i].long_name);
            }
            else{
              console.log('---others---');
              console.log(place.address_components[i].short_name);
              console.log(place.address_components[i].long_name);
            }
          }

          //set latitude, longitude and zoom
          this.lat = place.geometry.location.lat();
          this.lng = place.geometry.location.lng();
          this.zoom = 12;
        }); 
      });
    });
  }
}

因为iF12new google.maps.Geocoder,并显示我它存在于下面。


但实际上,当构建时,显示上述错误。

    • 更新1:**
{
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "importHelpers": true,
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "baseUrl": "src",
    "paths": { "@angular/*": ["node_modules/@angular/*"] }
  }
}

这是tsconfig. json文件。

    • 更新2:**

使用declare var google: any;适用于
this.geoCoder = new google.maps.Geocoder;
const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);,但在 * google. maps. places. PlaceResult上失败*找不到命名空间"google"const place: google.maps.places.PlaceResult = autocomplete.getPlace();

b4lqfgs4

b4lqfgs41#

tsconfig.app.json中找到了解决方案。

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

types中只添加了"googlemaps",它丢失了,错误消失了。不需要添加declare var google: any;,没有它也会工作得很好。

yx2lnoni

yx2lnoni2#

解决方案是
1.安装网络管理系统i @类型/谷歌Map@3.43.3”
1.转到tsconfig.app.json并将类型设置为“types”:[谷歌Map]

sz81bmfz

sz81bmfz3#

以下内容适用于我的用例,使用节点16:

% node --version
v16.17.1
% npm --version
8.15.0

已安装Angular GoogleMap模块并键入:

npm i @angular/google-maps --legacy-peer-deps
npm i @types/googlemaps --legacy-peer-deps

请注意,如果您运行的是更新版本的Node,则可以省略--legacy-peer-deps参数。
然后,将Google Map类型添加到tsconfig.app.json中的"types"指令:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "google.maps" /* DECLARE TYPE HERE */
    ]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

终于能够使用Google Maps class

new google.maps.Map(this.mapElement.nativeElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8
});

相关问题