將地區網址添加到Geochart

Question

我正在使用Google Geochart創建地圖，並且需要一個偵聽器，以便用戶單擊區域時可以加載給定的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偵聽器可在我使用的另一張地圖上使用，如果在此地圖上無法使用，我在做什么錯呢？

Answer 1

有兩個問題。 首先，您使用錯誤的索引來引用您的URL； 它們位於第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);
}