Angular 5 – google未定义(谷歌地图)

发布时间：2020-12-17 17:10:53 所属栏目：安全来源：网络整理

导读：我想在我的Angular 5应用程序上使用谷歌地图,但我鼓励了一些问题. 加载视图时,我在js控制台中收到错误： LoginComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: google is not defined at LoginComponent.ngAfterViewInit (login.component.ts:15

我想在我的Angular 5应用程序上使用谷歌地图,但我鼓励了一些问题.

加载视图时,我在js控制台中收到错误：

LoginComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: google is not defined 
at LoginComponent.ngAfterViewInit (login.component.ts:15) 
at callProviderLifecycles (core.js:12428)..

我的组件：

import {AfterViewInit,Component} from '@angular/core';
    declare let google: any;

    @Component({
      selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.css']
    })
    export class LoginComponent implements AfterViewInit {

       ngAfterViewInit(): void {
          let origin = new google.maps.LatLng(4.0,2.0 );
          let destination = new google.maps.LatLng(1.0,1.5);
       }

       constructor() {}
    }

app.module.ts

import {AgmCoreModule} from '@agm/core';

@NgModule({
  declarations: [
    AppComponent,LoginComponent
  ],imports: [
    BrowserModule,FormsModule,HttpModule,AppRoutingModule,AgmCoreModule.forRoot({
      apiKey: 'KEY'
    })
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule {}

我正在使用npm安装的AgmCoreModule：

npm install @agm/core --save

我也尝试过这样导入LatLang类：

import LatLng = google.maps.LatLng;

并在我的index.html中使用脚本

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places" async defer></script>

但是我一直收到同样的问题.
我错过了什么吗？

解决方法

agm / core加载google maps&在模块导入中设置api密钥,因此您不需要< script src =“https://maps.googleapis.com/maps/api/js?key=KEYu0026amp;libraries=places”async defer>< /脚本> 跟着他们开始 tutorial.你最终会得到类似的东西

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!