Google GeoChart Coun

时间:2019-03-18 17:51:58

标签: javascript charts google-visualization

像“俄罗斯联邦”和“科特迪瓦”(“科特迪瓦”)这样的国家在命名时没有出现。

当我使用国家代码代替时,大多数显示,但这对我的项目没有用。

我想在可识别的国家/地区名称上有某种列表? 还是通过API访问此内容的方法?

我直接从Wikipedias ISO 3166列表中提取了国家名称:https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes,如the page所指定。

现在,我一直在猜测Google图表将接受哪些国家/地区名称。

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

//Functional Version
(function() {
  google.charts.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Bolivia', 200],
      ['RU', 700]
    ]);
    var chart = new google.visualization.GeoChart(document.getElementById('regions_2'));
    chart.draw(data);
  }
})();

//My Version
(function() {
  google.charts.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Bolivia', 200],
      ['Russian Federation', 700]
    ]);
    var chart = new google.visualization.GeoChart(document.getElementById('regions_1'));
    chart.draw(data);
  }
})();
<script src="https://www.gstatic.com/charts/loader.js"></script>
<h1>My non-functional map</h1>
<div id="regions_1" style="width: 900px; height: 500px;"></div>
<h1>Functional map</h1>
<div id="regions_2" style="width: 900px; height: 500px;"></div>

1 个答案:

答案 0 :(得分:1)

使用api密钥,您可以调用以下端点来确定您应使用的名称...

https://maps.googleapis.com/maps/api/geocode/json?key={api_key}&address={address}

例如,使用-> &address=Russian Federation
将返回以下json ...

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "Russia",
               "short_name" : "RU",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "Russia",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 82.1673907,
                  "lng" : -168.97788
               },
               "southwest" : {
                  "lat" : 41.185353,
                  "lng" : 19.6160999
               }
            },
            "location" : {
               "lat" : 61.52401,
               "lng" : 105.318756
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 70,
                  "lng" : 179
               },
               "southwest" : {
                  "lat" : 40,
                  "lng" : 27
               }
            }
         },
         "place_id" : "ChIJ-yRniZpWPEURE_YRZvj9CRQ",
         "types" : [ "country", "political" ]
      }
   ],
   "status" : "OK"
}

不确定国家/地区代码为什么对您的项目没有用。
但如果与工具提示上显示的内容有关,
当用户将鼠标悬停在图表上的国家/地区时。
您可以同时提供图表的值,
以及要在工具提示上显示的格式化值。

{v: 'RU', f: 'Russian Federation'}

这样图表将突出显示该区域,
然后工具提示将显示所需的名称。

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['Bolivia', 200],
    [{v: 'RU', f: 'Russian Federation'}, 700]
  ]);

  var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
  chart.draw(data);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>