google.load导致空dom / screen

我正在尝试异步添加谷歌可视化，但我遇到了问题。我把它缩小到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);
}

});

已邀请:

3 个回复

递劝臼类洪

这篇文章帮助我：如何动态加载Google Maps javascript API（按需加载）这里的不同之处在于定义了load方法选项属性中的callback：

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

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

蜂佬渺

我遇到过同样的问题。虽然我的工作是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函数中删除

搁手

注意：以下内容适用于所有javascript，但是使用Greasemonkey完成。它还使用Google图表API作为示例，但此解决方案超越了其他Google API，可以在您需要等待脚本加载的任何地方使用，而不会由计时器设置延迟。使用带有回调的google.load无法解决使用Greasemonkey添加Google图表时的问题。在此过程中（Greasemonkey注入页面），添加了www.google.com/jsapi脚本节点。在为Google的jsapi javascript添加此元素后，注入（或页面）脚本已准备好使用google.load命令（需要在添加的节点中加载），但此jsapi脚本尚未加载。设置超时有效，但超时仅仅是Google jsapi脚本加载与注入/页面脚本的时序竞争的解决方法。在脚本执行google.load（以及可能的google.setOnLoadCallback）的位置移动会影响时间竞争情况。以下提供了一个解决方案，在调用google.load之前等待加载google脚本元素。这是一个例子：

// ********* INJECTED SCRIPT *********//
// add element
var gscript = document.createElement('script');
gscript.setAttribute("type", "application/javascript");
gscript.setAttribute("id", "XX-GMPlusGoogle-XX");
document.body.appendChild(gscript);

// event listener setup     
gscript.addEventListener("load",    
    function changeCB(params) {
        gscript.removeEventListener("load", changeCB);
        google.load("visualization", "1", {packages:["corechart"], "callback": 
            function drawChart() {
                var data;
                data = new google.visualization.arrayToDataTable(durationChart);

                var options = {
                    title:"Chart Title",
                    legend: {position:"none"},
                    backgroundColor:"white",
                    colors:["white","Blue"],
                    width: window.innerWidth || document.body.clientWidth,
                    height: window.innerHeight || document.body.clientHeight,
                    vAxis: {title: "Durations", baselineColor: "black", textStyle:{fontSize:12}},
                    hAxis: {title: "Days Since First Instance"},
                    height: ((cnt > 5)? cnt * 50 : 300),
                    isStacked: true
                }; // options


                // put chart into your div element
                var chart = new google.visualization.BarChart(document.getElementById('XX-ChartDiv-XX'));
                chart.draw(data, options);
            } // drawChart function
        }); //packages within google.load & google load
    } // callback changeCB
);

// can use SSL as "https://www.google.com/jsapi";
gscript.src = "http://www.google.com/jsapi";

要回复问题请先登录或注册

google.load导致空dom / screen

3 个回复

发起人

geomap

google.load

问题状态

google.load导致空dom / screen

与内容相关的链接

3 个回复

发起人

geomap

google.load

问题状态