我正在尝试使用谷歌地理图表显示 map https://developers.google.com/chart/interactive/docs/gallery/geochart
map 可以很好地显示数据和指定国家,但我不知道如何为每个特定国家分配一个 onClick 链接,甚至无法为这些国家获取任何 onClick 函数。
此链接描述了事件“regionClick”和“select”,这听起来像是我需要的一部分,但我不确定这些将如何触发我的链接功能...我是 javascript 的新手。对于“select”,似乎有一种方法可以“getSelected”
<scripts type='text/javascript'>
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Projects'],
['Russia', 3],
['France', 2],
['Spain', 4]
]);
var options = {};
options['dataMode'] = 'regions';
options['width'] = '834px';
options['height'] = '521px';
var container = document.getElementById('map_canvas');
var chart = new google.visualization.GeoChart(container);
chart.draw(data, options);
};
function myClickHandler(){
var selection = chart.getSelection();
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
message += '{row:' + item.row + ',column:' + item.column + '}';
} else if (item.row != null) {
message += '{row:' + item.row + '}';
} else if (item.column != null) {
message += '{column:' + item.column + '}';
}
}
if (message == '') {
message = 'nothing';
}
alert('You selected ' + message);
}
</script>
感谢任何帮助或指导。
最佳答案
您需要做几件事。首先,由于您的函数 myClickHandler
引用了对象 chart
,因此它需要与 chart
在同一范围内,因此您必须将其移动到内部绘制 map
。其次,您需要为使用 myClickHandler
函数的图表创建一个 'click'
事件处理程序。代码应如下所示:
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Projects'],
['Russia', 3],
['France', 2],
['Spain', 4]
]);
var options = {
dataMode: 'regions',
width: 834,
height: 521
};
var container = document.getElementById('map_canvas');
var chart = new google.visualization.GeoChart(container);
function myClickHandler(){
var selection = chart.getSelection();
var message = '';
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
message += '{row:' + item.row + ',column:' + item.column + '}';
} else if (item.row != null) {
message += '{row:' + item.row + '}';
} else if (item.column != null) {
message += '{column:' + item.column + '}';
}
}
if (message == '') {
message = 'nothing';
}
alert('You selected ' + message);
}
google.visualization.events.addListener(chart, 'select', myClickHandler);
chart.draw(data, options);
}
google.load('visualization', '1', {packages: ['geochart'], callback: drawMap});
jsfiddle:http://jsfiddle.net/asgallant/6dP28/
关于谷歌 GeoChart 的 Javascript onClick 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21336987/