Question

如果我理解正确，使用defer将按照我放置的顺序加载脚本。

这将允许我在我自己的功能之前加载jQuery（因为它更轻，并且更快地进行了工作）。我在底部加载了Google地图，因为它对tv-modal.js内的函数进行了回调。

<script src="js/jquery.min.js" defer></script>
<script src="js/tv-modal.js" defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key=abc&callback=modalMap.initMap" defer></script>

我的Js看起来像这样：

var modalMap = {
    map: null,

    init: function() {
        var self = this;
        this.map = $('#modal-g-map');
    },

    initMap: function(){
        map = new google.maps.Map(document.getElementById('modal-g-map'), {
            center: {lat: 59.9071401, lng: 10.7711175},
            zoom: 11
        });
    }

}.init();

但谷歌地图并不高兴：

Uncaught InvalidValueError：modalMap.initMap不是函数

为什么Google地图回调无法调用我的函数modalMap.initMap？

Answer 1

modalMap不是这样的：

{
    map: null,

    init: function() {
        var self = this;
        this.map = $('#modal-g-map');
    },

    initMap: function(){
        map = new google.maps.Map(document.getElementById('modal-g-map'), {
            center: {lat: 59.9071401, lng: 10.7711175},
            zoom: 11
        });
    }

}

....你将它设置为上述对象的init - 方法的返回值。 init-method不返回任何内容，因此modalMap为undefined。

您必须使用init - 方法返回对象：

init: function() {
    var self = this;
    this.map = $('#modal-g-map');
    return this;//<--return the object
}

Answer 2

我想API启动函数的方式是，它不会通过键入initMap来识别modalMap是对象"modalMap.initMap"的函数，因此它不是有效的函数名。尝试在该对象之外创建一个函数，如下所示：

function apiCallback() {
  modalMap.initMap();
}

并调整您的回调参数：

&callback=apiCallback

谷歌地图和加载脚本异步 - 如何订购加载？

2 个答案: