geochart地区可点击的网址 [英] geochart regions clickable urls

问题描述

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

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

  google.charts .load（'current'，{'packages'：['geochart']}）; 
 google.charts.setOnLoadCallback（drawRegionsMap）; 
 
函数drawRegionsMap（）{
 
 var data = google.visualization.arrayToDataTable（[
 ['Country'，'Popularity']，
 [ 'England'，400]，
 ['Wales'，300]，
 ['Scotland'，400]，
 ['Ireland'，600]，
 
]）; 
 
 var options = {
 region：'GB'，
 
解析：'各省'，
}; 
 
 var chart = new google.visualization.GeoChart（document.getElementById（'regions_div'））; 
 
 chart.draw（data，options）; 
} 
  

我们希望：
威尔士链接到www.example .com / wales
爱尔兰链接至www.example.com/ireland
等$ / b>

任何帮助都可以吗？

非常感谢

解决方案

有很多方法可以处理，但关键是使用请记住，'select'事件

'select'事件被触发，

因此请确保长度> 0

推荐使用 DataTable 中的一列来存储URL

使用 DataView 来隐藏图表中的列

然后根据图表选择获取网址

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

google.charts.load（'current'，{callback：function（）{var data = google .visualization.arrayToDataTable（[['Country'，'Popularity'，'Domain']，['England'，400，'www.example.com/England']，['Wales'，300，'www.example。威尔士']，['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_divstyle =width：600px; height：500px;>< / div>

We want to embed a really basic interactive map on our website, where clicking a region will take you to a specific page on our site. We would like to use the regions in google geochart

This is the map we are working with 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);
  }

And we would want: Wales to link to www.example.com/wales Ireland to link to www.example.com/ireland etc

Can any help?

Many thanks

解决方案

there are a number of ways to handle, but the key is using the 'select' event

keep in mind, the 'select' event is fired both when something is selected and de-selected,
so make sure length > 0

recommend using a column in the DataTable to store the URLs

use a DataView to hide the column from the chart

then get the URL based on the chart selection

see following working snippet...

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>

这篇关于geochart地区可点击的网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！