Question

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

这是我们正在使用的地图 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中的列来存储网址

使用DataView隐藏图表中的列

然后根据chart选择

获取网址

请参阅以下工作代码段...

＆＃13;

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

＆＃13;

<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>

＆＃13;

geochart地区可点击的网址

1 个答案: