如何将谷歌地图集成到 Angular 9 应用程序中
[英]How to integrate Google Maps into Angular 9 app
问题描述
I am trying to follow this tutorial to display google maps in my Angular 9 app, but I am facing the below issue.
我正在尝试按照本教程在我的 Angular 9 应用程序中显示谷歌地图，但我面临以下问题。
I carried out the below steps:我执行了以下步骤：
I ran
npm install @angular/google-maps我运行npm install @angular/google-mapsImported the below Module & added it to my imports array in AppModule :
导入以下模块并将其添加到AppModule 中的导入数组中：
import { GoogleMapsModule } from '@angular/google-maps';
- Adding this script tag with my api key:使用我的 api 密钥添加此脚本标记：
<script src="https://maps.googleapis.com/maps/api/js?key=myKey"></script>
- Added this tag to my HTML:将此标签添加到我的 HTML 中：
<google-map></google-map>
But when I load the page I get this error in the console:但是当我加载页面时，我在控制台中收到此错误：
Can someone please tell me what is causing this error, & how it can be resolved?有人可以告诉我是什么导致了这个错误，以及如何解决？ I've followed the steps in the tutorial so I'm not sure what I'm doing incorrectly.我已经按照教程中的步骤操作，所以我不确定我做错了什么。
2 个解决方案
解决方案1
2 2020-04-09 09:22:54
I found this would only work when I imported the script into the head of my index.html.我发现这仅在我将脚本导入 index.html 的头部时才有效。 Anywher below that and I get errors.任何低于那个，我得到错误。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>apoms</title>
<base href="/">
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=[APIKey]"></script>
....
</head>
<body>
<app-root></app-root>
<!-- <noscript>Please enable JavaScript to continue using this application.</noscript> -->
</body>
</html>
解决方案2
0 2020-03-05 07:40:52
Have you imported import { MapInfoWindow } from '@angular/google-maps';您是否从“@angular/google-maps”导入了 import { MapInfoWindow }; in your component and use @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow;在您的组件中并使用 @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow; in class?.在班上？。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.