javascript - Google Charts - GeoChart - USA Counties for West Virginia
问题描述
我正在尝试使用 Google Charts GeoChart 显示西弗吉尼亚州(美国)的县地图。我从下面的代码中得到的只是西弗吉尼亚州的轮廓,但没有县。我该如何解决?
我一直在搞乱“选项”设置,但 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>
我希望能够查看西弗吉尼亚州的各个县,最终目标是能够查看悬停时这些县的数据。
谢谢!
解决方案
您将需要用于resolution: "metros"
获取县级轮廓。
但是,数据中的县名似乎不起作用。
如果我将县名更改为经度/纬度坐标,
则会出现一些东西......
var data = google.visualization.arrayToDataTable([
['lat', 'lng', 'Popularity'],
[38.2556905, -81.42789839999999, 200], // <-- 'Kanawha County'
]);
您可以使用以下网址检索 lng / lat...
https://maps.googleapis.com/maps/api/geocode/json?address=Kanawha%20County&sensor=false&key=AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY
(注意:可能不适用于上述 api 密钥)
它返回以下 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,
而不是在绘制图表时请求这些......
推荐阅读
- node.js - 使用 puppeteer 执行 Jest 测试时出现超时错误
- flutter - 如何从用户登录中获取数据以在主页上显示和更新用户名?
- flutter - 如何在单击单个按钮时激活 setState 和snackBar?
- ffmpeg - ffmpeg - 在背景图像上覆盖文本
- javascript - 如何在数组中随机生成一个项目而不连续两次获得相同的项目?
- c++ - 我如何开始这个问题以及如何找到 -ve 号码?
- azure - 在没有 Office 365 的情况下使用 AIP/MISP 标签
- javascript - 如何将函数循环到 VueJs 方法中?
- python-3.x - 如何使用熊猫删除国家名称以外的列中的数据
- python - 在 Python 中,如何将包含名称和地址的字符串数据集拆分为单独的列。