google.load导致空dom /屏幕

Question

我正在尝试异步添加谷歌可视化,但我遇到了问题.我把它缩小到google.load导致问题.当google.load部分js运行时,我得到一个空屏幕/ dom.任何人都知道我做错了什么.

我也试过使用google.setOnLoadCallback,我得到了相同的结果.

任何帮助都会很棒

相关代码:

    $(document).ready(function () {
google.load('visualization', '1', { 'packages': ['geomap'] }, { 'callback': drawVisualization });


                function drawVisualization() {
                   $.ajax({
                        type: "POST",
                        data: "{'monitorId':'" + monitor + "','monitorName':'" + name + "','context':'" + context + "'}",
                        dataType: "json",
                        url: "WebService.asmx/LoadMonitorToolGeo",
                        contentType: "application/json; charset=utf-8",
                        processData: true,
                        success: function (msg) {

                            var obj = jQuery.parseJSON(msg.d);


                            // $(msg.d).hide().appendTo("#sortable").fadeIn();
                            $("#" + obj.context).find(".toolContent").hide().html(obj.data).fadeIn();

                            DrawWorldMap(obj.map, obj.context);

                        },
                        error: function (req, status, error) {

                        },
                        complete: function (req, status) {


                        }
                    });



function DrawWorldMap(response, id) {
    var data = new google.visualization.DataTable();
    data.addRows(response.d.length);
    data.addColumn('string', 'Country');
    data.addColumn('number', 'Popularity');
    for (var i = 0; i < response.d.length; i++) {
        data.setValue(i, 0, response.d[i].Country);
        data.setValue(i, 1, response.d[i].Popularity);
    }
    var options = {};
    options['dataMode'] = 'regions';

    var container = document.getElementById(id);
    var geomap = new google.visualization.GeoMap(container);
    geomap.draw(data, options);
}

});

Answer 1

这篇文章帮助我:

如何动态加载Google Maps javascript API(按需加载)

这里的不同之处在于定义callback了load方法选项属性:

var options = {packages: ['corechart'], callback : myCallback};
google.load('visualization', '1', options);

我相信这种方式google.setOnLoadCallback(myCallback)将不再需要,幸运的是,似乎何时callback添加该方法将不会清理页面.

Answer 2

我遇到过同样的问题。虽然我的可以在 Chrome 中运行，但在 Firefox 中却无法运行。

我必须添加这个才能让它工作

setTimeout(function() {
    // Google Visualization stuff goes here
}, 0);

请参阅此处https://nealpoole.com/blog/2010/07/jquery-getjson-firefox-and-google-visualization-madness/

另外，您可能想尝试并放置

google.load('visualization', '1', { 'packages': ['geomap'] }, { 'callback': drawVisualization });

在脚本标签中的 html 标头中并将其从 $(document).ready 函数中删除