Question

我尝试在Squarespace网站上使用Google Chart Geomap。但我在那里得到空白容器。

以下是来源网址：https://developers.google.com/chart/interactive/docs/gallery/geomap?csw=1#regionsexample

请注意，即使这个包含用法示例的页面也会显示空白容器。与放置在该页面上的JSFiddle相同。我通过放置我的ApiKey来编辑JsFiddle，但我仍然得到相同的结果。

然后我发现了这个answer并使用了多个版本。但它没有帮助。我试过45,44,43和42。

如何让它发挥作用？

我对Squarespace页面的链接是（如有必要）：https://campisano.squarespace.com/map-1

      google.charts.load('current', {
        'packages':['geomap'],
        // 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': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };

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

：我的jsfiddle。

Answer 1

对于初学者来说，套餐应该是'geochart'，而不是'geomap'

以及图表对象......

google.visualization.GeoChart

不......

google.visualization.GeoMap

最后，没有选项 - ＆gt; dataMode

应该是 - ＆gt; displayMode

请参阅以下工作代码段...

＆＃13;

      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': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['displayMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoChart(container);

        geomap.draw(data, options);
      };

＆＃13;

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

＆＃13;

Google Chart Geomap无效

1 个答案: