Question

我正在使用Google Geocharts并按照Google的文档（https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=en）设置如下图表：

<head>

数组 a1 是全局定义的。脚本包括标题中的行。问题是，有时，我得到一个错误说：

Item

并且图表无法加载。真正的问题是很难确定问题，因为它总是不会发生。似乎有时google.visualization尚未设置？但是，使用 setOnLoadCallback 调用 drawRegionsMap 的全部意义不是，它将在google.visualization成功设置后调用吗？

我确实尝试更改 setOnLoadCallback 行的位置，如下所述：Google Visualization - TypeError: Cannot read property 'DataTable' of undefined [Chrome specific]。我还将这2行放在页面的Item.count部分，但有时仍会出现错误（在Chrome和IE中测试过）。

有人可以指点我如何避免出现此错误吗？

Answer 1

请注意，google.setOnLoadCallback与google不同。图表 .setOnLoadCallback。如果您使用google.charts.load（），则还需要使用google.charts.setOnLoadCallback（）。他们一起去。

此外，由于您使用的是GeoChart，您可能仍需要加载jsapi加载程序，该加载程序用于通过Google Maps加载地理编码数据。但是，对于最新版本，这已不再适用，但如果您使用的是旧版本，则仍然适用。所以你的文档应该是这样的：

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawSomeGeoChart);
      function drawSomeGeoChart() {
         ...
      }
    </script>

Answer 2

在加载谷歌之前，我通常会等待load事件您还可以在callback语句中定义google.charts.load函数。

var a1 = [
  ['Country', 'Popularity'],
  ['Germany', 200],
  ['United States', 300],
  ['Brazil', 400],
  ['Canada', 500],
  ['France', 600],
  ['RU', 700]
];

// wait for page to load
window.addEventListener('load', loadGoogle, false);

function loadGoogle() {
  // define callback in load statement
  google.charts.load('current', {'packages':['geochart'], 'callback': drawRegionsMap});
}

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable(a1);
  var options = {};
  var chart = new google.visualization.GeoChart(document.getElementById('div_geochart'));
  chart.draw(data, options);
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="div_geochart"></div>

Answer 3

在偶然的情况下，有人遇到与我相同的问题：使用setTimeout()构建一个小延迟

由于某些原因，当我合并loader.js VueJS时，回调函数没有完成它的工作。经过一段时间的挖掘和建设 - VOILA！地图:)

Answer 4

这是我的解决方法：
在顶部添加<script>标签，并在其中使用“ defer”。

<head>
  <script defer async=false src="https://www.google.com/jsapi"></script>
  <script defer  src="https://www.gstatic.com/charts/loader.js"></script>
</head>

未定义setOnLoadCallback的Google可视化

4 个答案: