javascript - 如何使用Angular实现Google GeoCharts

您可以在https://developers.google.com/chart/interactive/docs/gallery/geochart上找到Google GeoChart代码示例和文档。

我知道如果我复制并粘贴这两个脚本文件

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'MY_API_KEY'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    </script>

在主<head>（index.html所在的地方）的<app-root>标记中，我将获得预期的输出...包含所有虚拟数据的地图

javascript - 如何使用Angular实现Google GeoCharts-LMLPHP

取而代之的是所有这些虚拟数据，我想注入其他国家和地区和值，但是当我将所有代码和方法放入另一个JS文件后，GeoMap不再显示在屏幕上

当前index.html文件

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Covid19</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <!-- Google Geomaps -->
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="./geomaps.js"></script>
</head>

<body>
  <app-root></app-root>
</body>

</html>

当前的geomaps.js文件：

google.charts.load('current', {
      'packages': ['geochart'],
      // Google Api Key
      'mapsApiKey': ''
      // MY_API_KEY
    });
    google.charts.setOnLoadCallback(drawRegionsMap);

    function drawRegionsMap() {
      var data = google.visualization.arrayToDataTable([
        ['Country', 'Popularity'],
        ['Germany', 200],
        ['United States', 300],
        ['Brazil', 400],
        ['Canada', 500],
        ['France', 600],
        ['RU', 700]
      ]);

      var options = {};

      var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

      chart.draw(data, options);

屏幕上的输出：无

在chrome dev工具控制台上的输出：

最佳答案

解决方法是将assets文件放在geomaps.js文件夹中

我最终有了这样的index.html文件：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>test</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <!-- Google Geomaps -->
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="./assets/geomaps.js"></script>
</head>

<body>
  <app-root></app-root>
</body>

</html>

和我的geomaps.js文件是这样的：

google.charts.load('current', {
  'packages':['geochart'],
  // Note: you will need to get a mapsApiKey for your project.
  // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-
settings
  'mapsApiKey': 'your-api-key'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
  ['Country', 'Popularity'],
  ['Germany', 200],
  ['United States', 300],
  ['Brazil', 400],
  ['Canada', 500],
  ['France', 600],
  ['RU', 700]
]);

var options = {};

var chart = new
google.visualization.GeoChart(document.getElementById('regions_div'));
  chart.draw(data, options);
}

就像开始时一样，不同之处在于我必须将geomaps.js文件放在assets文件夹中

角度解决方案