这段代码绘制了一张带有 Google Geomap API 的 map
<script type="text/javascript">
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = new google.visualization.DataTable();
data.addColumn('string','iso'); //e.g.: mx
data.addColumn('number','population'); //e.g.: 114
data.addRows([["mx",114],["ec",14],["ve",28]]);
var options = {
region: '005',
width: '511px',
height: '280px',
showLegend: true
};
var geomap = new google.visualization.GeoMap(document.getElementById('map'));
geomap.draw(data,options);
};
</script>
默认选择的区域是 005(南美洲)。这些是其他可用区域:
- 013 - (中美洲)
- 150 -(欧洲)
如何动态更改已绘制 map 的区域?像这样的事情:
<a href="javascript:void(null);" onclick="changeRegion(150);">Europe</a>
我知道必须重新绘制 map ,但我有点陷入区域属性修改步骤。任何想法都会有帮助。谢谢!
最佳答案
如果您已经拥有数据,我会给您一个我在自己的应用程序中使用的代码片段。我想更容易理解而不是冗长的解释。希望能帮助到你。 就我而言,我想按同一地区的国家/地区显示数字。
geomap = new google.visualization.GeoMap(document.getElementById('geo_chart'));
google.visualization.events.addListener( geomap, 'regionClick',
function(e)
{
var dataLocal = new google.visualization.DataTable();
var grouped_cities;
if (e['region'] == "0")
return;
options['colors'] = [0xaacdf8, 0x164177]; //orange colors
options['dataMode'] = 'markers';
options['region'] = e['region'];
options['showZoomOut'] = true;
if ( previous_region != e['region'] )
{
var indexes = dataFull.getFilteredRows([{column: 0, value: e['region']}]);
dataLocal.addRows(indexes.length);
dataLocal.addColumn('string', 'City');
dataLocal.addColumn('number', 'Views');
for ( i=0; i<indexes.length; i++ )
{
dataLocal.setValue(i, 0, dataFull.getValue(indexes[i], 2));
dataLocal.setValue(i, 1, dataFull.getValue(indexes[i], 3));
}
grouped_cities = google.visualization.data.group( dataLocal, [0],[{'column': 1, 'aggregation': google.visualization.data.sum, 'type': 'number'}]);
previous_region = e['region'];
}
geomap.draw(grouped_cities, options);
delete grouped_cities;
delete dataLocal;
}
);
关于javascript - Google Geomap API 更改区域选项 onClick(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13671204/