角度 - 谷歌地图API - 未捕获的参考错误:谷歌没有定义 - 只是有时

Question

我已经看到这个问题被问了100次，但似乎没有一个答案有效。我正在尝试声明这样的类：

class Popup extends google.maps.OverlayView {
  // Classy stuff
}

但我总是收到错误Uncaught ReferenceError: google is not defined

问题是，谷歌地图在我的代码中的其他任何地方都可以工作，但当我声明这个类时就不行了。另外，我只是在这样的课程之后声明它：

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss',]
})
export class MapComponent implements AfterViewInit, OnDestroy {
  map: google.maps.Map; <-- No problem with google namespace here
  // Map stuff
}
class Popup extends google.maps.OverlayView { <-- Problem is with this google namespace
  // Classy stuff
}

我刷新页面，有时它会加载，有时崩溃并给我那个错误。

我正在加载我的索引.html如下所示：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=myKey&libraries=places"></script>

而且它总是有效的(我在整个项目中一直使用谷歌地图，并且还没有遇到任何其他谷歌命名空间的问题。就在我尝试创建该类时(

Answer 1

在潜伏并寻找解决方法之前，您可能需要查看此Angular Google Map API文档。

请随时在SO上查看这些答案，因为它们似乎可以解决您遇到的相同问题。

可能是：1(您的脚本未正确加载，因此无法识别全局Google.Maps。 或。。。2( angular-google-maps在 Google Maps SDK 完全准备就绪之前处理指令。

Answer 2

这可能是因为叠加层尚未加载，但地图已加载。如果您查看脚本加载的顺序，map在overlay之前加载;这可能就是为什么您在overlay而不是map时遇到问题的原因。但我认为你仍然可能会遇到map问题，这取决于网络速度。

在尝试使用脚本之前，应

尝试不使用async和defer加载脚本，以确保同步加载库

甚至谷歌也建议在尝试对API类进行子类化时同步加载他们的脚本

https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

实际上，这将因此对覆盖类进行子类化 同步加载 API 更简单