如何修复Angular Google Maps中的类型错误?

时间:2019-06-18 16:17:10

标签: angular google-maps google-places angular-google-maps

我正在我的应用程序中使用Angular Google Maps,但是我不能在我的代码中使用google.maps.places.PlaceResult作为重要变量的类型。


我正在实现以下代码:(向下滚动至“添加位置/地点搜索”栏)

https://www.freakyjolly.com/angular-7-6-add-google-maps-in-angular-2-plus-applications-using-angular-google-maps-module-agm-core-easily/

我正在地图上进行地点搜索,但出现此错误:

enter image description here

在此代码中:

ngOnInit() {
    // Load places autocomplete
    this.maps.load().then(() => {
      this.setCurrentLocation();
      this.geoCoder = new google.maps.geoCoder;

      let autocomplete = new google.maps.places.autocomplete(this.searchElementRef.nativeElement, {
        types: ["address"]
      });

      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          // Get the place result
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();

          // Verify result
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          // Set latitude, longitude & zoom
          this.userLat = place.geometry.location.lat();
          this.userLng = place.geometry.location.lng();
          this.zoom = 12;
        });
      });
    });
  }

我只是按照示例进行操作,但似乎无法识别google。您如何解决这个问题?

我希望按原样使用链接中的示例,但我不能。

谢谢!

1 个答案:

答案 0 :(得分:0)

要解决此问题,您需要在名为google-maps.d.ts的文件夹的根文件夹中添加名为types的文件。

然后在该文件中添加以下代码:

google-maps.d.ts

import '@types/googlemaps';

declare global {
    interface Window {
        google: typeof google;
    }
}

这将使您可以在打字稿中为变量提供google.X.X类型的类型。确保在项目npm install --save @types/googlemaps中安装了类型。

此外,请确保在types文件中添加tsconfig.json,以将其指向包含以下代码的文件夹:

tsconfig.json

// tsconfig.json
compilerOptions: {
   ...
   "typeRoots": [
     "node_modules/@types",
     "types"
   ],
   ...
}

我从中得到答案的地方((feilxmosh向下滚动到第二个答案,共有3个投票):

How to install Typescript typings for google maps

信用去@JensHabegger发送给我这个链接。我回答了自己的问题,因为JensHabegger没有。