Google Marker GeoChart не отображается в FLASK - PullRequest
Новая
       51

Google Marker GeoChart не отображается в FLASK

0 голосов
/ 26 апреля 2020

Я создаю приложение, используя Flask (Python) и пытаюсь использовать Google Маркер GeoChart .

Следующий скрипт как независимый html файл работает нормально: 

    <html>
  <head>
    <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': google_map_api_key
     });
     google.charts.setOnLoadCallback(drawMarkersMap);

      function drawMarkersMap() {
      var data = google.visualization.arrayToDataTable([
        ['City',   'Population', 'Area'],
        ['Rome',      2761477,    1285.31],
        ['Milan',     1324110,    181.76],
        ['Naples',    959574,     117.27],
        ['Turin',     907563,     130.17],
        ['Palermo',   655875,     158.9],
        ['Genoa',     607906,     243.60],
        ['Bologna',   380181,     140.7],
        ['Florence',  371282,     102.41],
        ['Fiumicino', 67370,      213.44],
        ['Anzio',     52192,      43.43],
        ['Ciampino',  38262,      11]
      ]);

      var options = {
        region: 'IT',
        displayMode: 'markers',
        colorAxis: {colors: ['green', 'blue']}
      };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

, но как только я пытаюсь отобразить через FLASK / Python, маркеры не отображаются: в моем файле index.html есть 

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>         
<script type="text/javascript" src="static/js/google-charts.js"></script> 
<div id="bubble_div" style="width: 1000px; height: 500;"></div> 
<script type='text/javascript'> bubble_chart(document.getElementById('bubble_div'));</script>

, где содержится файл google-charts.js следующая javascript функция: 

   function bubble_chart(getElementById){
      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': google_map_api_key
      });
      google.charts.setOnLoadCallback(drawMarkersMap);

       function drawMarkersMap() {
       var data = google.visualization.arrayToDataTable([
         ['City',   'Population', 'Area'],
         ['Rome',      2761477,    1285.31],
         ['Milan',     1324110,    181.76],
         ['Naples',    959574,     117.27],
         ['Turin',     907563,     130.17],
         ['Palermo',   655875,     158.9],
         ['Genoa',     607906,     243.60],
         ['Bologna',   380181,     140.7],
         ['Florence',  371282,     102.41],
         ['Fiumicino', 67370,      213.44],
         ['Anzio',     52192,      43.43],
         ['Ciampino',  38262,      11]
       ]);

       var options = {
         region: 'IT',
         displayMode: 'markers',
         colorAxis: {colors: ['green', 'blue']}
       };

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

При взгляде на inspect я вижу следующую ошибку: 

    Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
js?key=YOUR_KEY_HERE:55 Google Maps JavaScript API error: InvalidKeyMapError
https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error
_.nd @ js?key=YOUR_KEY_HERE:55

Сначала я подумал, что это проблема с ключом API, но поскольку он работает в html файле, я сомневаюсь, что API - это проблема. Любой совет, пожалуйста?

Большое спасибо.

1 Ответ

0 голосов
/ 27 апреля 2020

Я узнал это сам и подумал, что должен поделиться. Случилось так, что, поскольку у меня есть несколько функций, похожих на bubble_chart () в google-charts.js, я повторял вызов одного и того же ключа API; в каждой функции появилось следующее утверждение. Это было причиной ошибки. Я переместил следующую часть в index.html head и проблема решена. 

google.charts.load('current', {
    'packages': ['geochart'],
    'mapsApiKey': google_map_api_key
  });

Итак, попробуйте вызвать API-ключ только один раз.

...