Javascript Google 未使用 Google Visualization API 定义；可能是 jQuery 的错
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5556953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google is not defined using Google Visualization API; possibly jQuery's fault
提问by Karl Rosaen
I'm getting the same error as seen in this questionto which there is no answer. To elaborate, I'm trying to load this demoin my code. I've altered it slightly in that I am not including their code in any header tag - this particular code fragment will be loaded in by jQuery. Anyway, so my code looks like this:
我遇到了与此问题中所见相同的错误，但没有答案。详细说明，我试图在我的代码中加载这个演示。我稍微修改了它，因为我没有将它们的代码包含在任何标题标记中——这个特定的代码片段将由 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>
This section of code lies in a div whose visibility is toggled as needed. The whole lot (the entire page here) is returned as the result of an ajax call.
这部分代码位于一个 div 中，其可见性根据需要进行切换。整个批次（此处为整个页面）作为 ajax 调用的结果返回。
The theory here being using jQuery's $(document).ready()handler means that google should be loaded when the document is ready.
这里使用 jQuery$(document).ready()处理程序的理论意味着应该在文档准备好时加载 google。
However, I'm getting this:
但是，我得到了这个：
Regardless of whether that section is inside ready()or not. Now here's the real kicker: in the dom explorer, I can find said object:
不管那个部分是否在里面ready()。现在真正的问题是：在 dom 资源管理器中，我可以找到所说的对象：
Can anyone please explain to me firstly why this is happening and then what I do to fix it?
任何人都可以先向我解释为什么会发生这种情况，然后我该如何解决？
Being a naive kind of javascript developer, I tried including the google scripts in my head tags. That then produced something like this question($ not defined) except that we're not loading jQuery from google, we're hosting it locally.
作为一个天真的 javascript 开发人员，我尝试在我的 head 标签中包含 google 脚本。然后产生了类似这个问题（$ 未定义）的问题，除了我们没有从谷歌加载 jQuery，我们在本地托管它。
We successfully load a number of other jQuery extensions inline this way as well as extra parts of jQuery code, so to my mind this should work. I do not know whether jQuery is getting in the way of Google/vice versa but they shouldn't be.
我们成功地以这种方式内联加载了许多其他 jQuery 扩展以及 jQuery 代码的额外部分，所以在我看来这应该可行。我不知道 jQuery 是否妨碍了 Google/反之亦然，但它们不应该。
Thoughts?
想法？
回答by Karl Rosaen
Removing $(document).ready should fix your problem. I tried your code and after commenting out $(document).ready, it worked:
删除 $(document).ready 应该可以解决您的问题。我试过你的代码，在注释掉 $(document).ready 后，它起作用了：
//$(document).load(function() {
google.load('visualization', '1', {packages:['intensitymap']});
google.setOnLoadCallback(drawChart);
//});
Now as for why this is the case, I do not know... In any case, you shouldn't need to wait for document.ready to call google.load; google.load will ensure that by the time your callback drawChart is called, it will be safe to execute.
现在至于为什么会这样，我不知道......无论如何，您不需要等待 document.ready 调用 google.load；google.load 将确保在您的回调 drawChart 被调用时，可以安全地执行。
回答by Drew Calder
You can load the the charts after the page has loaded but with a special callback.
您可以在页面加载后加载图表，但有一个特殊的回调。
google.load("visualization", "1", {"callback" : drawChart});
google.load("visualization", "1", {"callback" : drawChart});
