javascript - (懒惰)重构后加载谷歌地图不起作用

Question

我只在需要时加载 Google map 。在我重构代码之前，它的工作原理如下:

function initialize_map_brand() {
  (...)
}

jQuery(document).ready(function ($) {
    load_google_map('initialize_map_brand');
});

重构后，我的代码如下所示:

lib = {
    loadGoogleMapScript: function(_callback) {
      (...)
      script.src = 'http://maps.google.com/maps/api/js?sensor=false&callback=' +_callback;
    }
}


Page = {
    viewPage: {
        init: function() {
            lib.loadGoogleMapScript(self.initialize_map);
        },
        initialize_map: function() {
            var locations = [ (...)
        }
    }
}

jQuery(document).ready(function ($) {
    Page.viewBPage.init();
});

现在我收到此错误:

"NetworkError: 400 Bad Request - http://maps.google.com/maps/api/js?sensor=false&callback=function%20()%20{var%20locations%20=%20[[%....

它似乎需要整个函数代码并将其传递到 url 中。那么如何使用新代码正确加载 Google map 脚本呢？

Se my fiddle here.

Answer 1

根据documentation您需要为 url callback 参数提供一个字符串，其中包含全局范围内的函数名称。

您改为将函数作为参数传递，因此函数主体会附加到 url 中。

var Page = {
    viewPage: {
        init: function() {
            lib.loadGoogleMapScript('Page.viewPage.initialize_map');
        },
        initialize_map: function() {
        }
    }
};

window.Page = Page;