1

我试图在 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

页面加载错误： 在此处输入图像描述

在我编辑一些东西之后： 在此处输入图像描述

4

2 回答 2

2

通过将 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>
于 2019-01-22T06:41:37.293 回答
0

或者，您可以在 ngAfterViewInit 中使用 1000 毫秒的 setTimeout 方法。不过有点hacky。

setTimeout(() => {
   var mapProp = {center: new google.maps.LatLng(this.latitute, this.longitute),zoom:13,};
   console.log(mapProp);
   var map = new google.maps.Map(this.element, mapProp);
 }, 1000)
于 2019-01-22T06:50:08.550 回答