Question

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

问题是，一切都可以在我的本地系统中完美运行。但是，当我使用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

页面加载错误：

编辑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方法。不过有点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)

Google Map API仅在Angular 6中不能与StackBlitz一起使用

2 个答案: