javascript - Google GeoChart 国家

Question

一些国家，如“俄罗斯联邦”和“科特迪瓦”(“象牙海岸”)在这样命名时不会出现。

当我改为使用国家/地区代码时，大多数会出现，但这对我的项目没有用。

我想有某种可识别国家/地区名称的列表？或者也许是一种通过 API 访问它的方法？

我直接从维基百科 ISO 3166 列表中获取国家/地区名称:https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes如 the page 中所述.

现在我还在猜测 Google Charts 会接受什么作为国家/地区名称。

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>

Answer 1

使用您的 api key ，您可以调用以下端点以确定您应该使用的名称...

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>