1

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

  1. 注入 jQuery
  2. 注入html结构
  3. 注入 googlemaps api（仅加载 bootstrap .js 文件，该文件再次加载实际的 main.js）&& 加载地图数据
  4. 加载 googlemaps api 后立即设置基本地图
  5. 加载地图数据后立即将其应用到地图上（例如设置标记）

我的问题是我可以设置一个回调方法以在 google api 完成加载时触发。我想开始加载我的数据，一旦加载地图并且数据请求成功（或失败）应用数据。我正在使用jQuery 的 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 部分（同源策略解决方法，这是负责加载外部脚本的函数的基本返回）：

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();

第二个谷歌地图部分：

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

和...

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

我不知道将 google api 请求放在哪里，因为它是 google 端的一个两步加载过程。也许我可以阻止jQuery Deferred的默认成功resolve（）调用并在google api回调方法中解决Deferred？有任何想法吗？

4

0 回答 0