通過Javascript異步加載谷歌地圖的問題

我想異步地使用谷歌地圖。這裏有很多例子，但是一個find使用全局（？）函數來展示使用回調函數的概念。然而，我正在研究的項目定義了各種對象，並使用原型向它們添加屬性/功能。相關的源代碼如下：通過Javascript異步加載谷歌地圖的問題

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

雖然我得到了成功的消息「谷歌地圖腳本加載成功」，我不知道以什麼作爲回調函數使用 - 總有一些事情是undefined。我嘗試過，例如，contentController.test - Cannot read property 'onGoogleMapsScriptLoaded' of undefined - 或者確實使用全局函數，如在Web上的示例中。我如何設置回調函數？或者我在這裏有一個更根本的錯誤？

編輯：整件事情是谷歌瀏覽器擴展的內容腳本的一部分 - 萬一這一點很重要。這包括我現在加載地圖的時候頁面真的用加載完畢的

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

在後臺腳本中。內容腳本具有調用asyncLoadGoogleMap的消息偵聽器。所以頁面應該完全在那裏。不過，我也遇到了同樣的錯誤。

來源

2014-05-24 Christian

真正的問題似乎是，我是一個Chrome擴展的內容腳本中嘗試這個。當我使用[Google開發者頁面]（https://developers.google.com/maps/documentation/javascript/examples/map-simple-async）中的基本示例時，該示例非常適合「獨立」頁面 - 在我的內容腳本中出現錯誤，回調函數未定義。但我不知道這個問題可能是什麼。 – Christian

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

來源

2014-08-11 08:12:54

通過Javascript異步加載谷歌地圖的問題

回答

相關問題