Google未使用Google Visualization API进行定义; 可能jQuery的错

Question

我得到了与此问题中看到的相同的错误,没有答案.详细说明,我正在尝试在我的代码中加载此演示.我稍微修改了一下,因为我没有在任何头文件中包含他们的代码 - 这个特殊的代码片段将由jQuery加载.无论如何,所以我的代码看起来像这样:

<script type='text/javascript' 
        src='https://www.google.com/jsapi?key=ABQIAAAAKl2DNx3pM....'>
</script>

<script type='text/javascript'>

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '', 'Country');
    data.addColumn('number', 'Population (mil)', 'a');
    data.addColumn('number', 'Area (km2)', 'b');
    data.addRows(5);
    data.setValue(0, 0, 'CN');
    data.setValue(0, 1, 1324);
    data.setValue(0, 2, 9640821);
    data.setValue(1, 0, 'IN');
    data.setValue(1, 1, 1133);
    /* ... */
    var chart = new google.visualization.IntensityMap(
                  document.getElementById('chart_div'));
    chart.draw(data, {});
}

$(document).ready(function() {
    google.load('visualization', '1', {packages:['intensitymap']});
    google.setOnLoadCallback(drawChart);
});
</script>

这部分代码位于div中,其可见性根据需要进行切换.整个批次(这里的整个页面)作为ajax调用的结果返回.

这里使用jQuery的$(document).ready()处理程序的理论意味着应该在文档准备好时加载谷歌.

但是,我得到了这个:

无论该部分是否在内部ready().现在这里是真正的踢球者:在dom explorer中,我可以找到所说的对象:

任何人都可以首先向我解释为什么会发生这种情况然后我要做些什么来解决它？

作为一个天真的javascript开发人员,我尝试在我的head标签中包含google脚本.然后产生类似这个问题($ not defined)的东西,除了我们没有从谷歌加载jQuery,我们在本地托管它.

我们以这种方式成功加载了许多其他jQuery扩展以及jQuery代码的额外部分,因此在我看来这应该可行.我不知道jQuery是否会妨碍谷歌/反之亦然,但他们不应该这样做.

思考？

Answer 1

删除$(document).ready应该可以解决您的问题.我尝试了你的代码并在评论出$(document).ready之后,它运行了:

//$(document).load(function() {
    google.load('visualization', '1', {packages:['intensitymap']});
    google.setOnLoadCallback(drawChart);
//});

至于为什么会出现这种情况,我不知道......无论如何,你不需要等待document.ready来调用google.load; google.load将确保在调用回调drawChart时,执行它是安全的.