angular - Google Map API 仅在 Angular 6 中无法与 StackBlitz 配合使用

标签 angular google-maps stackblitz

我试图在 stackblitz 中为我的学生设置 Google Map api 以进行演示。我创建了自定义目录来显示 Google map 。

问题是我的本地系统一切正常。但是,当我使用 stackblitz 时,我收到 Google is not Defined 错误。可能的问题是我将 googleapi.js 保留到 Index.html 中并且它没有在页面上加载。如果我在代码中编辑任何内容,它就会开始工作。因此,问题仅在于页面加载。

我尝试了一些补丁,例如在 setTimeout 上加载 map 或在 OnInit/OnAfterViewInit 上加载。但它们都不起作用。

链接:https://stackblitz.com/edit/googlemap-custom-directory?file=src%2Fapp%2Fgoogle-map.directive.ts

页面加载错误: enter image description here

在我编辑一些内容之后: enter image description here

最佳答案

通过将 googleapis 脚本放置在 head 标记中,该脚本会在应用程序 javascript 的其余部分之前加载和解析。

index.html

<head>
  <script src="https://maps.googleapis.com/maps/api/js?key={{APIKEY}}&libraries=places"></script>
</head>
<my-app>loading</my-app>

关于angular - Google Map API 仅在 Angular 6 中无法与 StackBlitz 配合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54302473/

相关文章:

angular - 更新到最新 typescript 版本时 lib.dom.d.ts 文件中缺少属性的问题

html - 固定元素不随滚动移动

android - 无法访问 com.google.android.gms.internal.zzbfm 的 zzbfm 类文件未找到

android - 如何在Google Maps Android上 “increase” VisibleRegion的大小

angular - 在 Medium 上嵌入 Stackblitz 编辑器

javascript - 切换菜单在导航栏 Angular 2 内关闭

angular - 如何使用 http ://myapp/mycontextpath? 等路径的路由在 Cloud Foundry 上部署 Angular 应用程序

angular - 在 stackblitz Angular 项目上找不到文件

google-maps - 谷歌地图 API : How to draw shortest plane path between two geo-points?

angular - Stackblitz : how can i execute a test using Angular?