我想在我的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=KEY\u0026amp;libraries=places”async defer>< /脚本> 跟着他们开始
tutorial.你最终会得到类似的东西
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
