如何添加 Google GeoChart 地图的链接？-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

489336

文章

250650551

访问

+关注

分类

暂无分类

日期归档

暂无数据

如何添加 Google GeoChart 地图的链接？

发布于2024-11-03 21:55 阅读(907) 评论(0) 点赞(20) 收藏(1)

我正在尝试使用 Google 的 GeoChart 为网站创建自定义可点击地图。我希望国家/地区可点击，这样用户在地图上选择不同的国家/地区后，就会将其引导至单独的网页。此外，我希望在选中状态下颜色会发生变化。有人能帮助我使用 JavaScript 添加选择事件吗？我将不胜感激。

下面是我目前拥有的代码。

  <html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
  </script>

  <script type="text/javascript">
  google.charts.load('current', {
    'packages':['geochart'],
    'mapsApiKey': 'AIzaSyD3MfRYHAynUsxWCZ8NDsA3cwvWlTkhT1s'
  });
  google.charts.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
   ['Country'],
      ['Thailand' ],
      ['India'],
      ['Malaysia'],
      ['Sri Lanka'],
      ['Indonesia'],
      ['Vietnam'],
      ['Korea'],
      ['Taiwan'],
      ['China'],  
    ]);

    var options = {
      region: '142', // Asia
      colorAxis: {colors: ['#f5f5f5']},
      datalessRegionColor: '#f5f5f5',
      defaultColor: '#ff8040',
    };

    var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
    chart.draw(data, options);
  };
  </script>
  </head>
  <body>
  <div id="geochart-colors" style="width: 700px; height: 433px;">  </div>
  </body>
  </html>

解决方案

正如您在我的代码中看到的，您需要添加一个侦听器，即 google.visualization.events.addListener。然后，在该侦听器中，您可以获取所选国家/地区的名称。我通过 console.log() 函数打印，您可以用它做任何您想做的事情。

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

  function drawRegionsMap() {
    var data = google.visualization.arrayToDataTable([
   ['Country'],
      ['Thailand' ],
      ['India'],
      ['Malaysia'],
      ['Sri Lanka'],
      ['Indonesia'],
      ['Vietnam'],
      ['Korea'],
      ['Taiwan'],
      ['China'],  
    ]);

    var options = {
      region: '142', // Asia
      colorAxis: {colors: ['#f5f5f5']},
      datalessRegionColor: '#f5f5f5',
      defaultColor: '#ff8040',
    };

    var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
    chart.draw(data, options);

  
  google.visualization.events.addListener(chart, 'select', function() {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var country = data.getValue(selectedItem.row, 0);
      console.log(country);

      
    }    
  });  };

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
  </script>
 
  </head>
  <body>
  <div id="geochart-colors" style="width: 700px; height: 433px;">  </div>
   </body>
  </html>