如何使用googlegeochart为文本启用悬停事件

是否可以将悬停效果与google geochart一起使用,以便地图上的选定区域也会触发区域列表中区域文本颜色的更改？

如果在地图上选择蒙大拿州,我希望列表中的"蒙大拿"这个词有不同的颜色.

我希望你明白我想要实现的目标.

function drawMap() {
  var data = google.visualization.arrayToDataTable([
    ['Province'],
    ['Montana'],
    ['Washington'],
    ['Oregon'],
    ['California'],
    ['New York'],
    ['Connecticut'],
    ['Alabama'],
    ['Idaho'],
    ['Nevada'],
    ['Nebraska'],
    ['Colorado'],
    ['Arizona'],
    ['New Mexico'],
    ['Texas'],
    ['Louisiana'],
    ['Oklahoma'],
    ['Virginia'],
    ['Kentucky'],
    ['Illinois'],
    ['Indiana'],
    ['Arkansas'],
    ['Louisiana'],
    ['Mississippi'],
    ['Georgia'],
    ['Florida'],
    ['Missouri'],
    ['Iowa'],
    ['Minnesota'],
    ['South Dakota'],
    ['North Dakota'],
    ['Wyoming'],
    ['Utah'],
    ['Illinois'],
    ['Maine'],
    ['Vermont'],
    ['Massachussets'],
    ['Maryland'],
    ['Delaware'],
    ['New Jersey'],
    ['South Carolina'],
    ['North Carolina'],
    ['Michigan'],
    ['Wisconsin'],
    ['Kansas'],
    ['Alaska'],
    ['Hawaii'],
    ['Rhode Island'],
    ['District of Colombia'],
    ['Ohio'],
    ['West Virginia'],
    ['Pennsylvania'],
    ['Tennessee'],
    ['New Hampshire']
  ]);

  var optiOns= {
    region: 'US',
    backgroundColor: '#eee',
    datalessRegionColor: '#ffc801',
    width: 468,
    height: 265,
    resolution: 'provinces',
  };
  var cOntainer= document.getElementById('mapcontainer');
  var chart = new google.visualization.GeoChart(container);

  function myClickHandler() {
    var selection = chart.getSelection();
    var message = '';
    for (var i = 0; i 
#regions {
  display: float:left;
}




  

    
Montana
    
Nebraska
    
    
Nevada
    
    
New Hampshire

    
Minnesota
    
    
Mississippi
    
    
Missouri

  
  





1> WhiteHat..：
1)   GeoChart缺少其他谷歌图表的许多事件和方法,

包括'onmouseover'  

要手动实现,我们可以使用常规的dom事件 - >'mouseover'  

当它发射时,发出一个dom 'click'事件  

这将触发图表的 'select'事件  

该'select'事件可用于获取被点击或"鼠标悬停"的区域的价值,  

然后可以用来突出显示列表条目

唯一的问题是将"鼠标悬停点击"事件与真正的点击事件分开  

我们可以使用变量来保存最后发生的事件,  

然后检查图表'select'事件中   的变量

2) 'select'事件  

对于此图表,在任何给定时刻只能选择一个实体,  

无需通过选择数组循环  

此外,单击某个区域时,会选中该区域  

再次单击相同区域时,将取消选择该区域  

这意味着chart.getSelection()将返回一个空数组

当"鼠标悬停点击"事件发生时,我们需要清除图表的选择  

清除选择将确保在发生实际点击事件时选择区域  

3)其他说明......  

截至2016年9月12日,GeoChart不再要求您包含jsapi装载机.  

建议使用较新的库loader.js代替  

根据发行说明 ......  


  
通过jsapi加载程序保留的Google Charts版本不再一致地更新.请loader.js从现在开始使用新的gstatic .  


这只会改变load声明

另外,您可以使用数据表来查找所选区域的值,  

无需使用一堆if语句来确定值  

4)看下面的工作片段......  

数据表用于构建区域链接列表  

当某个区域被"鼠标悬停"时,列表中的链接将突出显示  

当一个区域被"点击"时,它的名字将被发送到控制台,  

这很容易被替换 window.location = ...  



function drawMap() {
  var data = google.visualization.arrayToDataTable([
    ['Province'],
    ['Montana'],
    ['Washington'],
    ['Oregon'],
    ['California'],
    ['New York'],
    ['Connecticut'],
    ['Alabama'],
    ['Idaho'],
    ['Nevada'],
    ['Nebraska'],
    ['Colorado'],
    ['Arizona'],
    ['New Mexico'],
    ['Texas'],
    ['Louisiana'],
    ['Oklahoma'],
    ['Virginia'],
    ['Kentucky'],
    ['Illinois'],
    ['Indiana'],
    ['Arkansas'],
    ['Louisiana'],
    ['Mississippi'],
    ['Georgia'],
    ['Florida'],
    ['Missouri'],
    ['Iowa'],
    ['Minnesota'],
    ['South Dakota'],
    ['North Dakota'],
    ['Wyoming'],
    ['Utah'],
    ['Illinois'],
    ['Maine'],
    ['Vermont'],
    ['Massachussets'],
    ['Maryland'],
    ['Delaware'],
    ['New Jersey'],
    ['South Carolina'],
    ['North Carolina'],
    ['Michigan'],
    ['Wisconsin'],
    ['Kansas'],
    ['Alaska'],
    ['Hawaii'],
    ['Rhode Island'],
    ['District of Colombia'],
    ['Ohio'],
    ['West Virginia'],
    ['Pennsylvania'],
    ['Tennessee'],
    ['New Hampshire']
  ]);
  data.sort([{column: 0}]);

  var optiOns= {
    region: 'US',
    backgroundColor: '#eee',
    datalessRegionColor: '#ffc801',
    width: 360,
    height: 265,
    resolution: 'provinces',
  };

  var cOntainer= document.getElementById('mapcontainer');
  var chart = new google.visualization.GeoChart(container);

  google.visualization.events.addListener(chart, 'select', myClickHandler);

  // use data table to build regions list
  var regiOns= document.getElementById('regions');
  for (var i = 0; i ' + data.getValue(i, 0) + ''
    );
  }

  // track events
  var lastEvent = null;
  container.addEventListener('click', function (e) {
    lastEvent = e;
  }, false);
  container.addEventListener('mouseover', function (e) {
    lastEvent = e;
    // dispatch click event to get hover value
    var event = document.createEvent('SVGEvents');
    event.initEvent('click', true, true);
    e.target.dispatchEvent(event);
  }, false);

  function myClickHandler() {
    var selection = chart.getSelection();
    var message = '';
    if (selection.length > 0) {
      if (selection[0].row !== null) {
        if (lastEvent.type === 'mouseover') {
          // mouseover
          var regiOnLinks= regions.getElementsByTagName('li');
          for (var i = 0; i 
div {
  display: inline-block;
  vertical-align: top;
}