Question

我正在使用Google Geochart创建地图并需要一个监听器，以便当用户点击某个区域时，它会加载一个给定的网址。

我的代码是：

google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});

  function drawVisualization() {
   var data = google.visualization.arrayToDataTable([
    ['Country', 'Value', {role: 'tooltip', p:{html:true}}],
    ['US', 20, '<a href="http://www.ipfa.org/council/branches/39/ipfa-americas/">Test</a>'],
    ['Canada', 20, 'http://www.ipfa.org/council/branches/106/ipfa-canada/'],
    ['GB', 20, 'http://www.ipfa.org/council/branches/52/ipfa-uk/'],
   ]);

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

   google.visualization.events.addListener(chart, 'select', function () {
    var selection = chart.getSelection();
    var row = selection[0].row;
    var url = data.getValue(row, 3);
    window.open(url);
   });

    chart.draw(data, {
     width: 800,
     height: 600,
     tooltip: {
      isHtml: true
     }
    }
   );
  }

URL侦听器在我使用的另一个地图上工作，我在做错的时候做错了什么？

Answer 1

有两个问题。首先，您使用错误的索引来引用您的网址;它们在第2列，而不是第3列（它不存在）：

var url = data.getValue(row, 3);

其次，您的某个网址（针对美国）是一个锚标记，如果传递给window.open，则无法使用。如果您想在工具提示中使用锚标记，请将单元格的值设置为URL列，并将URL列的格式化值设置为锚标记：

['US', 20, {v: 'http://www.ipfa.org/council/branches/39/ipfa-americas/', f: '<a href="http://www.ipfa.org/council/branches/39/ipfa-americas/">Test</a>'}]

我还建议测试选择数组的长度，因为如果用户连续两次单击一个区域（第二次单击取消选择该区域），则选择数组可能为空，这将导致此行抛出错误：

var row = selection[0].row;

我建议改用：

var selection = chart.getSelection();
if (selection.length) {
    var url = data.getValue(selection[0].row, 2);
    window.open(url);
}

将区域URL添加到Geochart

1 个答案: