angular - Google Map API 仅在 Angular 6 中不能与 StackBlitz 一起使用
问题描述
我试图在 stackblitz 中为我的学生设置 Google Map api 以进行演示。我创建了自定义目录来显示谷歌地图。
问题是一切都完美地融入我的本地系统。但是,当我使用 stackblitz 时,我遇到了Google is not defined
错误。可能是我将 googleapi.js 保存到 Index.html 中并且它没有在页面上加载的问题。如果我在代码中编辑任何内容,它就会开始工作。因此,问题仅在于页面加载。
我尝试了一些补丁,例如在 setTimeout 上加载地图或在 OnInit/OnAfterViewInit 上加载。但它们都不起作用。
链接:https ://stackblitz.com/edit/googlemap-custom-directory?file=src%2Fapp%2Fgoogle-map.directive.ts
解决方案
通过将 googleapis 脚本放置在 head 标记中,该脚本在应用程序 javascript 的其余部分之前加载和解析。
索引.html
<head>
<script src="https://maps.googleapis.com/maps/api/js?key={{APIKEY}}&libraries=places"></script>
</head>
<my-app>loading</my-app>
推荐阅读
- javascript - 点击 div 打开子菜单 Javascript
- javascript - Solidity ParseError:预期标识符但得到';'
- ios - iOS SwiftUI UIViewRepresentable updateUIView 找出哪些属性实际上发生了变化?
- pine-script - Pinescript 存储高低值的错误
- html - Angular 中的对话框不显示模板
- python - 有没有办法绕过python中的dunder魔法?
- java - 如何限制http连接
- algorithm - 给定选择标准的复音音高检测算法?
- spring - 将部署在 AWS Elastic Beanstalk 中的 Spring 应用程序配置为使用 SSL
- python - 如何在 Ursina Python 中设置圆柱坐标