Google GeoChart Coun - PullRequest
Новая
       14

Google GeoChart Coun

2 голосов
/ 18 марта 2019

Некоторые страны, такие как «Российская Федерация» и «Кот-д'Ивуар» («Берег Слоновой Кости»), не отображаются при названии в качестве таковых.

Большинство отображается при использовании вместо этого кода страны,но это бесполезно для моего проекта.

Я предполагаю, что есть какой-то список по узнаваемым названиям стран?Или, возможно, способ получить доступ к этому через API?

Я взял названия стран прямо из списка ISO 3166 Википедии: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes, как указано на на странице .

Сейчас я застрял в догадках, что 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>

1 Ответ

1 голос
/ 18 марта 2019

используя ваш ключ 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>
...