typescript Angular 5 - 谷歌未定义（谷歌地图）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47562107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 - google is not defined (Google Maps)
提问by adam-pociejowski
I want to use google maps on my Angular 5 app, but I encourtered some problem.
我想在我的 Angular 5 应用程序上使用谷歌地图，但我遇到了一些问题。
When view is loading I receive error in js console:
加载视图时，我在 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)..
My component:
我的组件：
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
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 {}
I'm using AgmCoreModule installed by npm:
我正在使用由 npm 安装的 AgmCoreModule：
npm install @agm/core --save
I tried also importing LatLang class this way:
我还尝试以这种方式导入 LatLang 类：
import LatLng = google.maps.LatLng;
And use script in my index.html
并在我的 index.html 中使用脚本
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places" async defer></script>
But all the time I received same issues. Am I missing something?
但我一直都收到同样的问题。我错过了什么吗？
采纳答案by LLai
agm/coreloads google maps & sets your api key within the module import, so you do not need <script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places" async defer></script>
agm/core加载谷歌地图并在模块导入中设置您的 api 密钥，因此您不需要 <script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places" async defer></script>
Follow their getting started tutorial. You'll end up with something like
按照他们的入门教程。你最终会得到类似的东西
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
回答by Saleem Mustafa
Get key from google maps and then place that key in app.module.ts under @NgModule
从谷歌地图获取密钥，然后将该密钥放在 app.module.ts 下 @NgModule
AgmCoreModule.forRoot({
apiKey: 'your key generated from google maps'
});
and in HTML add this
并在 HTML 中添加这个
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
and also this in the CSS
还有这个在 CSS
agm-map {
height: 300px;
}
回答by Garik Kalashyan
You need just add corresponding dependencies and types to your project. So these are.
您只需将相应的依赖项和类型添加到您的项目中。所以这些是。
in tsconfig.json -> "types":[... "googlemaps"]
在 tsconfig.json -> "types":[... "googlemaps"]
in package.json -> "dependencies":[... "googlemaps": "^1.12.0"]
在 package.json -> "dependencies":[... "googlemaps": "^1.12.0"]
And don't forget about the API key which you should get from https://developers.google.com/places/web-service/get-api-key, after having it you set it to the module via AgmCoreModuleor just adding import script into HTML, I am using GMap component of PrimeNGand all these steps helped me go forward.
并且不要忘记您应该从https://developers.google.com/places/web-service/get-api-key获取的 API 密钥，在将其设置为模块后，您可以通过AgmCoreModule或仅添加导入脚本转换为 HTML，我正在使用 GMap 组件，PrimeNG所有这些步骤都帮助我前进。
