Как реализовать Google GeoCharts с Angular - PullRequest
Новая
       10

Как реализовать Google GeoCharts с Angular

1 голос
/ 25 марта 2020

Вы можете найти пример кода Google GeoChart и документы здесь https://developers.google.com/chart/interactive/docs/gallery/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>) я получу ожидаемый результат ... Карта со всеми этими фиктивными данными

enter image description here

Вместо всех этих фиктивных данных я хочу добавить некоторые другие страны и значения, но как только я помещаю весь этот код и методы в другой файл JS, GeoMap больше не отображается на screen

Current index.html file 

<!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>

Current geomaps.js file: 

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);

Вывод на экран: Nothing

Вывод на консоль инструментов chrome dev: enter image description here

Ответы [ 2 ]

0 голосов
/ 25 марта 2020

Решение заключалось в том, чтобы поместить в папку assets файл geomaps.js

В результате у меня был индекс. 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

Решение для Angular

0 голосов
/ 25 марта 2020

Это без использования angular, вы можете внести изменения в файл javascript и HTML согласно требованию.

Я пробовал с существующим примером, доступным здесь Визуализация: 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>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>  
  </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': '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);
}

favicon.ico: создайте один и поместите все файлы в одно и то же location

Вы пропустили один "}" в файле geomaps javascript. js.

src = "geomaps. js" для текущего каталога.

<base href="/"> Указывает базовый URL, который будет использоваться для всех относительных ссылок в текущем документе. Я заменил его на <base href=".">, так как я поместил все файлы в одну папку.

Я получил ответ без ошибок. Chrome вывод

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...