Question

所以在我的index.html文件中我有

<script src='https://maps.googleapis.com/maps/api/js?key=##MYKEY##'></script>

并在我的app.component.ts文件中

declare var google: any;
@Component({
    ....
})
export class AppComponent implements OnInit {
    ....
    map;

    ngOnInit(): void {
        this.map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8
        });
    }
}

地图加载得很好。

但是，当我向脚本文件添加 async defer 属性时，

<script async defer src='https://maps.googleapis.com/maps/api/js?key=##MYKEY##'></script>

我得到ReferenceError: google is not defined，我认为这是由于googleapi javascript没有准备好。

如何延迟组件中的声明google并确保google准备就绪？

Answer 1

我不是导致问题的谷歌的声明（该声明仅适用于打字稿），但是对

的调用

new google.maps

在加载api之前

您可以删除async关键字（最简单，不是应用可能会稍慢）

https://developers.google.com/maps/documentation/javascript/tutorial#sync

或者将回调传递给脚本

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=methodToCall">

通过该方法，您可以触发事件并在组件中捕获该事件，然后创建地图

Angular 4延迟在组件中声明谷歌，直到async defer js准备就绪

1 个答案: