Geting Uncaught ReferenceError：在将GeoCharts Visualization API与Angular-Google-Charts结合使用时未定义google

Question

我正在尝试在Angular组件中使用GeoCharts API（Google Charts的一部分）。为此，我要引用的特定代码是：https://developers.google.com/chart/interactive/docs/gallery/geochart#coloring-your-chart。

我正在使用此处指定的Angular-Google-Charts程序包：https://www.npmjs.com/package/angular-google-charts

更具体地说，我希望能够在我的HTML模板中显示多个国家/地区的图表，这将使每个国家/地区以不同的阴影或颜色突出显示，如您在指定的链接上看到的。

我尝试使用API​​文档中的代码，这导致我遇到此错误：

ERROR Error: Uncaught (in promise): ReferenceError: google is not defined
ReferenceError: google is not defined
    at new GeoChartsComponent (geo-charts.component.ts:52)
    at createClass (core.js:31985)
    at createDirectiveInstance (core.js:31807)
    at createViewNodes (core.js:44210)
    at createRootView (core.js:44082)
    at callWithDebugContext (core.js:45632)
    at Object.debugCreateRootView [as createRootView] (core.js:44848)
    at ComponentFactory_.create (core.js:30788)
    at ComponentFactoryBoundToModule.create (core.js:25731)
    at ViewContainerRef_.createComponent (core.js:30995)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

这是我的GeoChartsComponent中的代码：

export class GeoChartsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    google.charts.load('current', { 'packages': ['geochart']});
    google.charts.setOnLoadCallback(this.drawRegionsMap);
  }

  drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
      ['Country',   'Latitude'],
      ['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],
      ['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],
      ['Canary Islands', 28], ['Cape Verde', 15],
      ['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],
      ['Comoros', -12], ['Cote d\'Ivoire', 6],
      ['Democratic Republic of the Congo', -3], ['Djibouti', 12],
      ['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],
      ['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],
      ['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],
      ['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', null],
      ['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],
      ['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],
      ['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],
      ['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],
      ['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],
      ['São Tomé and Principe', 0], ['Senegal', 15],
      ['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],
      ['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],
      ['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],
      ['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],
      ['Zimbabwe', -18]
    ]);
  }

  options = {
    region: '002', // Africa
    colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
    backgroundColor: '#81d4fa',
    datalessRegionColor: '#f8bbd0',
    defaultColor: '#f5f5f5',
  };

  chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
  chart.draw(data, options);            // this line fails to compile with multiple errors.

我的相同组件的HTML模板仅包含：

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;">
</div>

我可以在代码正常运行方面获得一些帮助吗？

还有这是我创建的StackBlitz，以防万一您喜欢它：https://stackblitz.com/edit/angular-lamnq7

Answer 1

尝试在declare var google: any;文件中添加typings.d.ts。