Question

我从google为我的网站制作了这个geochart，但我希望这些地区可以点击。因此，当我点击它向我显示信息时，我想添加该区域。我想设置输出文本的样式。

另外一件事：我想只显示没有周围国家的国家地图，所以我希望地图形状像国家（在这种情况下是马其顿）而不是矩形。以下是js代码：

 <html>
      <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
    google.setOnLoadCallback(drawVisualization);

    function drawVisualization() {var data = new google.visualization.DataTable();

    data.addColumn('string', 'city');
    data.addColumn('number', 'Value'); 
    data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array(); var name = new Array();

    data.addRows([[{v:'MK-76',f:'Tetovë'},0,'Kipper Market']]);
    ivalue['MK-TE'] = 'Obama (D)  will <span style="color:#444; font-weight:bold;">win</span> in Alaska.';


    data.addRows([[{v:'MK-19',f:'Gostivar'},0,'Kipper Market']]);
    ivalue['MK-GV'] = 'Obama (D)  will <span style="color:#444; font-weight:bold;">win</span> in Alaska.';

    data.addRows([[{v:'MK-40',f:'Kërçovë'},0,'Kipper Market']]);
    ivalue['MK-KI'] = 'Obama (D)  will <span style="color:#444; font-weight:bold;">win</span> in Alaska.';





     var options = {
     backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
     colorAxis:  {minValue: 0, maxValue: 49,  colors: ['#ec2227','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E',]},
     legend: 'none',  
     backgroundColor: {fill:'none',stroke:'none' ,strokeWidth:0 },  
     datalessRegionColor: '#f5f5f5',
     displayMode: 'regions', 
     enableRegionInteractivity: 'true', 
     resolution: 'provinces',
     sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
     region:'MK',
     keepAspectRatio: true,
     width:100 + "%",
     height:100 + '%',
     tooltip: {textStyle: {color: '#444444'}, trigger:'focus'}  
     };
      var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 
      google.visualization.events.addListener(chart, 'select', function() {
      var selection = chart.getSelection();
      if (selection.length == 1) {
      var selectedRow = selection[0].row;
      var selectedRegion = data.getValue(selectedRow, 0);
      if(ivalue[selectedRegion] != '') {document.getElementById('message').innerHTML = ivalue[selectedRegion];}
      if(name[selectedRegion] != '') {document.getElementById('name').innerHTML = name[selectedRegion];}
      }
      });
      chart.draw(data, options);



      go();

      window.addEventListener('resize', go);

      function go(){
       chart.draw(data, options);
       }
      }

      </script>
      </head>
      <body>
        <div id="container">
      <div id="visualization"></div>
      <div id="message"></div>
     </div>

      </body>
     </html>

Answer 1

你可以试试这个

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

      if(ivalue[country] != '') {document.getElementById('message').innerHTML = ivalue[country];}
      if(name[country] != '') {document.getElementById('name').innerHTML = name[country];}
    }    
  });

谷歌地理广告使地区可点击

1 个答案: