使用Google Visualization API时无法定义Google，可能是jQuery的问题。

Question

使用Google Visualization API时无法定义Google，可能是jQuery的问题。

9

我遇到了与这个问题中相同的错误，但没有答案。具体来说，我正在尝试在我的代码中加载这个演示。我稍微修改了它，我不会将他们的代码包含在任何头标签中——这个特定的代码片段将由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()处理程序意味着当文档准备就绪时应加载google。

然而，我得到了以下结果：

Google is not defined error message screenshot.

无论该部分是否在ready()内。现在问题来了：在dom浏览器中，我可以找到该对象：

So google does actually exist. This picture proves it.

请问有人能够首先解释一下为什么会出现这种情况，然后告诉我如何修复它吗？

作为一个天真的JavaScript开发者，我尝试在head标签中包含Google脚本。这导致类似于this question（$未定义）的东西出现，除了我们不是从Google加载jQuery，而是在本地托管它。

我们成功地以这种方式内联加载了许多其他jQuery扩展以及额外的jQuery代码部分，所以在我看来应该可以工作。我不知道jQuery是否妨碍了Google/反之亦然，但它们不应该这样做。

你有什么想法吗？

- user257111

2个回答

4

您可以在页面加载后通过特殊的回调函数加载图表。

google.load("visualization", "1", {"callback" : drawChart});

https://developers.google.com/loader/#Dynamic

- Drew Calder

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Karl Rosaen · Accepted Answer

移除$(document).ready应该可以解决你的问题。我尝试了你的代码，并在注释掉$(document).ready后，它可以正常工作：

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

至于为什么会这样，我不知道... 无论如何，你不需要等待 document.ready 来调用 google.load; google.load 会确保在调用回调函数 drawChart 时，它是安全可执行的。