如何修复Angular Google Maps中的类型错误? [英] How to fix type error in Angular Google Maps?

问题描述

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

---

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

在此代码中:

  ngOnInit(){//加载地点自动完成this.maps.load().then(()=> {this.setCurrentLocation();this.geoCoder =新的google.maps.geoCoder;让autocomplete = new google.maps.places.autocomplete(this.searchElementRef.nativeElement，{类型:[地址"]});autocomplete.addListener("place_changed"，()=> {this.ngZone.run(()=> {//获取地点结果让地方:google.maps.places.PlaceResult = autocomplete.getPlace();//验证结果如果(place.geometry ===未定义|| place.geometry === null){返回;}//设置纬度，经度和飞涨this.userLat = place.geometry.location.lat();this.userLng = place.geometry.location.lng();this.zoom = 12;});});});} 

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

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

提前谢谢！

解决方案

要解决此问题，您需要在根目录下的根文件夹中添加一个名为 google-maps.d.ts 的文件.名为 types 的文件夹.

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

google-maps.d.ts

  import'@ types/googlemaps';声明全局{界面窗口{谷歌:谷歌的类型;}} 

这将使您可以在打字稿中为变量指定类型，其类型为 google.X.X .确保已将类型安装到项目中， npm install --save @ types/googlemaps .

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

tsconfig.json

 //tsconfig.json编译器选项:{..."typeRoots":["node_modules/@ types"，类型"]，...} 

我从中得到答案的地方((通过 feilxmosh 向下滚动到第二个答案):

如何为Google地图安装Typescript类型

信用转到@JensHabegger，向我发送了此链接.我回答了自己的问题，因为JensHabegger没有.

I am using Angular Google Maps in my app, but I cannot use google.maps.places.PlaceResult as a type for an important variable in my code.

---

I am implementing this code: (Scroll down to Add Location/Places Search bar)

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

I am doing a places search on the map, and I am getting this error:

In this code:

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;
        });
      });
    });
  }

I am just following the example, but it seems to not recognize google. How do you fix this?

I expect to use the example in the link as it is, but I cannot.

Thanks in advance!

解决方案

To fix this issue, you need to add a file called, google-maps.d.ts in your root folder inside a folder called types.

Then in that file add the following code:

google-maps.d.ts

import '@types/googlemaps';

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

This will allow you to give variables a type in typescript, of type google.X.X. Make sure you have types installed into your project, npm install --save @types/googlemaps.

Also, make sure you add types in your tsconfig.json file to point it the folder with the code:

tsconfig.json

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

Where I got the answer from, (Scroll down to the second answer by feilxmosh):

How to install Typescript typings for google maps

Credit goes to @JensHabegger for sending me this link. I answered my own question because JensHabegger did not.

这篇关于如何修复Angular Google Maps中的类型错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！