javascript - 将区域 URL 添加到地理图表

Question

我正在使用 Google Geochart 创建 map ，并且需要一个监听器，以便当用户单击某个区域时它会加载给定的 URL。

我的代码是:

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 监听器在我使用的另一张 map 上工作，我做错了什么而无法在这个 map 上工作？

Answer 1

有两个问题。首先，您使用了错误的索引来引用您的 URL；它们位于第 2 列，而不是第 3 列(该列不存在):

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

其次，您的 URL 之一(针对美国)是 anchor 标记，如果传递给 window.open 调用，该标记将不起作用。如果您希望工具提示中包含 anchor 标记，请将单元格的值设置为 URL，并将 URL 列的格式化值设置为 anchor 标记:

['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);
}