Google GeoChart Coun

问题: Some countries like "Russian Federation" and "Côte d'Ivoire" ("Ivory Coast") doesn't show up when named as such. Most show up when i use the country code instead, but tha...

问题:

Some countries like "Russian Federation" and "Côte d'Ivoire" ("Ivory Coast") doesn't show up when named as such.

Most show up when i use the country code instead, but that isn't useful for my project.

I imagine that there is some sort of list over recognizable country names? Or perhaps a way to access this through the API?

I have taken the country names straight from Wikipedias ISO 3166 list: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes as specified on the page.

Right now I'm stuck guessing what Google Charts will accept as a country name.

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:

using your api key, you can make a call to the following endpoint to determine the name you should use...

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

for instance, using --> &address=Russian Federation
will return the following 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"
}

not sure why country codes aren't useful for your project.
but if it has anything to do with the content displayed on the tooltip,
when the user hovers the country on the chart.
you can supply both the value for the chart,
and the formatted value to be displayed on the tooltip.

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

this way the chart will highlight the region,
and the tooltip will display the desired name.

see following working snippet...

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>

  • 发表于 2019-03-19 21:34
  • 阅读 ( 251 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除