Question

我正试图将谷歌地图异步化。那里有很多例子，但是find会使用全局（？）函数来展示使用回调函数的概念。但是，我正在研究的项目定义了各种对象，并使用原型向它们添加属性/功能。相关的源代码如下所示：

var Demo = new Array();

Demo.Content = function() { };
Demo.Content.prototype = { };


Demo.Content.Controller =  function() {
  this.contentView = new Demo.Content.View(this);
};

Demo.Content.Controller.prototype = {
  initialize : function() {
    this.contentView.initialize();
  },

  onGoogleMapsScriptLoaded : function() {
    alert('onGoogleMapsScriptLoaded');
  },
};


Demo.Content.View = function(controller) {
  this.controller = controller;
};

Demo.Content.View.prototype = {

  initialize : function() {
    // now called from background script (Chrome extensions)
    //this.asyncLoadGoogleMap(); 
  },

  asyncLoadGoogleMap : function() {
    $.getScript("http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=???")
       .done(function (script, textStatus) {            
          alert("Google map script loaded successfully");
       })
      .fail(function (jqxhr, settings, ex) {
          alert("Could not load Google Map script: " + ex);
      });
  },

};  


contentController = new Demo.Content.Controller();
contentController.initialize();

虽然我收到成功消息“Google地图脚本已成功加载”，但我不知道要使用什么作为回调函数 - 总是undefined。我尝试过，例如，contentController.test - Cannot read property 'onGoogleMapsScriptLoaded' of undefined - 或者确实使用了Web上的示例中的全局函数。如何设置回调函数？或者我在这里有一个更基本的错误？

编辑：整件事情都是Google Chrome扩展程序内容脚本的一部分 - 如果这很重要的话。这包括我现在在使用

完成加载页面时加载地图

 chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
   if (changeInfo.status == 'complete') {
     chrome.tabs.sendMessage(tabId, {action: 'load-map'}, function(){});
   }
 });

在后台脚本中。内容脚本有一个调用asyncLoadGoogleMap的消息监听器。所以页面应该完全在那里。不过，我也有同样的错误。

Answer 1

Here is the code for AngularJS，但它仍然会创建全局回调函数：

// Google async initializer needs global function, so we use $window
angular.module('GoogleMapsInitializer')
    .factory('Initializer', function($window, $q){

        // maps loader deferred object
        var mapsDefer = $q.defer();

        // Google's url for async maps initialization accepting callback function
        var asyncUrl = 'https://maps.googleapis.com/maps/api/js?callback=';

        // async loader
        var asyncLoad = function(asyncUrl, callbackName) {
          var script = document.createElement('script');
          //script.type = 'text/javascript';
          script.src = asyncUrl + callbackName;
          document.body.appendChild(script);
        };

        // callback function - resolving promise after maps successfully loaded
        $window.googleMapsInitialized = function () {
            mapsDefer.resolve();
        };

        // loading google maps
        asyncLoad(asyncUrl, 'googleMapsInitialized');

        return {

            // usage: Initializer.mapsInitialized.then(callback)
            mapsInitialized : mapsDefer.promise
        };
    })

通过Javascript异步加载Google Map的问题

1 个答案: