Question

我目前正在构建一个使用google maps api v3的小部件。它的设置过程如下：

注入jQuery
注入html结构
注入googlemaps api（只加载一个bootstrap .js文件，再次加载实际的main.js）＆amp;＆amp;加载地图数据
加载googlemaps api后立即设置基本地图
加载地图数据后立即将其应用于地图上（例如设置标记）

我的问题是，我可以设置一个callback方法，以便在谷歌api完成加载时触发。我想开始加载我的数据，一旦加载了地图并且数据请求成功（或失败），就应用数据。我正在使用jQuery's Deferred Object，代码看起来像这样：

主要部分：

jQuery.when(
    fn.getData()
)
.then(function(resolvedArgs) {
    gmap.setData(resolvedArgs['data']);
    gmap.addMarkerOverlay();
})
.fail(function(jqXHR, textStatus) {
    var message = textStatus + ': loading data';
    fn.showInfoBox(message);
});

GoogleMaps Part（同源策略解决方法，这是负责加载外部脚本的函数的基本返回）：

return jQuery.Deferred(function(deferred) {
    var scriptTag = document.createElement('script');
    scriptTag['type'] = 'text/javascript';
    scriptTag['src'] = 'googlemapsapiurl&callback=setupGoogleMap';
    scriptTag['async'] = true;
    document.getElementsByTagName("head")[0].appendChild(scriptTag);
    scriptTag['onload'] = scriptTag['onreadystatechange'] = function() {
        if (!this.readyState || this.readyState === "loaded" || this.readyState === 'complete') {
            deferred.resolve();
        }
    };
}).promise();

第二个GoogleMaps部分：

var setupGoogleMap = function() {
    jQuery('.container').trigger('googleMapsReady');
};

和...

jQuery('.container').on('googleMapsReady', function(event) {
    fn.setupGoogleMap();
});

我不知道在哪里放谷歌api请求，因为这是谷歌结束时的两步加载过程。也许我可以阻止jQuery Deferred的默认成功resolve（） - 调用并解决google api回调方法中的Deferred而不是？有什么想法吗？

推迟Google Maps API回调

0 个答案: