Question

我已经看过这个问题100次，但没有一个答案似乎有效。我试图宣布这样一个类：

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

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

事实上，Google Maps可以在我的代码中的其他任何地方使用，但在我声明这个类时却不行。另外，我在这样的课程之后宣布它：

@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
}

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

我在我的index.html中加载如下：

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

并且它始终有效（我在整个项目中使用谷歌地图，并且还没有任何其他谷歌命名空间的问题。就在我尝试创建该类时）

Answer 1

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

随时查看these answers on SO，因为它们似乎可以解决您遇到的同一问题。

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

Answer 2

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

您应该尝试不使用async和defer加载脚本，以确保在尝试使用之前同步加载库

即使Google建议在尝试子类化API类时同步加载脚本

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

实际上，这将是overlay类的子类同步加载API更简单

Angular - 谷歌地图API - 未捕获的ReferenceError：谷歌没有定义 - 只是有时？

2 个答案: