Google Map API 仅在 Angular 6 中不适用于 StackBlitz

Question

我正在尝试设置 Google 地图 api 以供我在 stackblitz 中的学生演示。我创建了自定义目录来显示 Google 地图。

问题是我的本地系统一切正常。但是，当我使用 stackblitz 时，出现 Google is not defined 错误。可能是我将 googleapi.js 保留为 Index.html 并且它没有在页面上加载的问题。如果我在代码中编辑任何内容，它就会开始工作。所以，问题只出现在页面加载上。

我尝试了几个补丁，比如在 setTimeout 上加载地图或在 OnInit/OnAfterViewInit 上加载。但是 none 有效。

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

页面加载错误：

在我编辑Soemthing之后：

Answer 1

通过将 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>

Answer 2

或者，您可以在 ngAfterViewInit 中使用 1000ms 的 setTimeout 方法。虽然有点老套。

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)

Google Map API 仅在 Angular 6 中不适用于 StackBlitz

Google Map API is not working with StackBlitz only in Angular 6

google-maps

angular

stackblitz