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() 处理程序的理论意味着当文档准备好时应该加载 google。

但是，我得到了这个：

无论该部分是否位于 内是否准备好（）。现在真正的亮点是：在 dom 资源管理器中，我可以找到所述对象：

谁能先向我解释一下为什么会发生这种情况，然后我该如何解决它？

作为一个天真的 JavaScript 开发人员，我尝试将 google 脚本包含在我的 head 标签中。然后产生了类似这个问题的内容（ $ 未定义）除了我们不从 google 加载 jQuery，我们在本地托管它。

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

想法？

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 时，它可以安全执行。

Answer 2

您可以在页面加载后加载图表，但使用特殊的回调。

google.load（“可视化”，“1”，{“回调”：drawChart}）;

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