google-maps - 地理图表区域可点击的网址

Question

我们希望在我们的网站上嵌入一个非常基本的交互式 map ，点击一个区域将带您到我们网站上的特定页面。我们想使用 google geochart 中的区域

这是我们正在使用的 map https://jsfiddle.net/tyvnfxf4/

      google.charts.load('current', {'packages':['geochart']});
  google.charts.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {

    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['England', 400],
      ['Wales', 300],
      ['Scotland', 400],
      ['Ireland', 600],

    ]);

    var options = {
      region: 'GB',

      resolution: 'provinces',
    };

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

    chart.draw(data, options);
  }

我们希望:威尔士链接到 www.example.com/wales爱尔兰链接到 www.example.com/ireland等等

有什么可以帮忙的吗？

非常感谢

Answer 1

有多种处理方式，但关键是使用'select'事件

请记住，'select' 事件会在选择和取消选择某些内容时触发，
所以请确保 length > 0

建议使用 DataTable 中的列来存储 URL

使用 DataView 隐藏图表中的列

然后根据chart选择获取URL

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity', 'Domain'],
      ['England', 400, 'www.example.com/England'],
      ['Wales', 300, 'www.example.com/Wales'],
      ['Scotland', 400, 'www.example.com/Scotland'],
      ['Ireland', 600, 'www.example.com/Ireland'],
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1]);

    var options = {
      region: 'GB',
      resolution: 'provinces'
    };

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

    google.visualization.events.addListener(chart, 'select', function () {
      var selection = chart.getSelection();
      if (selection.length > 0) {
        console.log(data.getValue(selection[0].row, 2));
        //window.open('http://' + data.getValue(selection[0].row, 2), '_blank');
      }
    });

    chart.draw(view, options);
  },
  packages:['geochart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="regions_div" style="width: 600px; height: 500px;"></div>