Google 图表 - GeoChart - 美国西弗吉尼亚州县

Question

我正在尝试使用 Google Charts GeoChart 显示西弗吉尼亚州（美国）的县地图。我从下面的代码中得到的只是西弗吉尼亚州的轮廓，但没有县。我该如何解决？

我一直在摆弄 "options" 设置，但是 region = "US-WV" 和 resolution = "provinces" 是我能得到的最接近的设置。该代码示例提供了两个示例县的数据。使用 resolution = "metros" 可能是一个答案，但它看起来不正确。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      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(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['County', 'Popularity'],
          ['Kanawha County', 200],
          ['Barbour County', 150]
        ]);

        var options = {
            tooltip: {trigger: focus},
            region: "US-WV",
            resolution: "provinces"
        };

        var chart = new google.visualization.GeoChart(document.getElementById('districts'));

        chart.draw(data, options);
      }
    </script>

我希望能够看到西弗吉尼亚州的各个县，最终目标是能够在悬停时看到这些县的数据。

谢谢！

Answer 1

您将需要使用 resolution: "metros" 来获取县概况。

但是，数据中的县名似乎不起作用。

如果我将县名更改为经/纬度坐标，
然后出现了一些东西...

var data = google.visualization.arrayToDataTable([
  ['lat', 'lng', 'Popularity'],
  [38.2556905, -81.42789839999999, 200],  // <-- 'Kanawha County'
]);

您可以使用以下方法检索经纬度/纬度 url...

https://maps.googleapis.com/maps/api/geocode/json?address=Kanawha%20County&sensor=false&key=AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY

（注意：可能不适用于上述 api 键）

其中returns以下json，可以用geometry.location...

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "Kanawha County",
               "short_name" : "Kanawha County",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "West Virginia",
               "short_name" : "WV",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "United States",
               "short_name" : "US",
               "types" : [ "country", "political" ]
            }
         ],
         "formatted_address" : "Kanawha County, WV, USA",
         "geometry" : {
            "bounds" : {
               "northeast" : {
                  "lat" : 38.6264269,
                  "lng" : -81.194113
               },
               "southwest" : {
                  "lat" : 37.9672089,
                  "lng" : -81.91519679999999
               }
            },
            "location" : {
               "lat" : 38.2556905,
               "lng" : -81.42789839999999
            },
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 38.6264269,
                  "lng" : -81.194113
               },
               "southwest" : {
                  "lat" : 37.9672089,
                  "lng" : -81.91519679999999
               }
            }
         },
         "place_id" : "ChIJNQedGRPUSIgRZaN_DqYadAE",
         "types" : [ "administrative_area_level_2", "political" ]
      }
   ],
   "status" : "OK"
}

我过去所做的是在数据库中添加一列，并预填 lng / lat，
而不是在绘制图表时请求那些...

Google 图表 - GeoChart - 美国西弗吉尼亚州县

Google Charts - GeoChart - USA Counties for West Virginia

javascript

charts

google-visualization

geo