谷歌的GeoChart的Javascript onClick功能-Java 学习之路

我正在尝试使用google的geochart显示 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>

任何帮助或方向表示赞赏谢谢

1 回答

您需要做几件事 . 首先，由于您的函数 myClickHandler 引用了对象 chart ，因此它需要与 chart 在同一范围内，因此您必须将其移到 drawMap 中 . 其次，您需要为使用 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/

回复于 2024-05-04T14:13:17+08:00

谷歌的GeoChart的Javascript onClick功能

1 回答

相关问题