How to enable hover events for text with google geochart

问题

Is it possible to use the hover effect with google geochart so that a selected region on the map also trigger a change of color of the text of the region at a list of the regions?

I would like to have the word "Montana" in the list a different color if Montana is selected on the map geochart.

I hope you understand what I'm trying to achieve.

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 < selection.length; i++) {
      var item = selection[i];
      message += '{row:' + item.row + ',column:' + item.column + '}';
      if (item.row != null) {
        message += '{row:' + item.row + '}';
      }
    }
    if (message == '') {
      message = 'nothing';
    }

    if (item.row == 0) {
      window.location = "/montana";
    }
    if (item.row == 2) {
      window.location = "/oregon";
    }
    if (item.row == 3) {
      window.location = "/california";
    }
    if (item.row == 4) {
      window.location = "/new_york";
    }
    if (item.row == 6) {
      window.location = "/alabama";
    }
    if (item.row == 7) {
      window.location = "/idaho";
    }
    if (item.row == 8) {
      window.location = "/nevada";
    }
    if (item.row == 9) {
      window.location = "/nebraska";
    }
    if (item.row == 5) {
      window.location = "/connecticut";
    }
    if (item.row == 1) {
      window.location = "/washington";
    }
    if (item.row == 10) {
      window.location = "/colorado";
    }
    if (item.row == 11) {
      window.location = "/arizona";
    }
    if (item.row == 12) {
      window.location = "/new_mexico";
    }
    if (item.row == 13) {
      window.location = "/texas";
    }
    if (item.row == 14) {
      window.location = "/louisaina";
    }
    if (item.row == 15) {
      window.location = "/oklahoma";
    }
    if (item.row == 16) {
      window.location = "/virginia";
    }
    if (item.row == 17) {
      window.location = "/kentucky";
    }
    if (item.row == 18) {
      window.location = "/illinois";
    }
    if (item.row == 19) {
      window.location = "/indiana";
    }
    if (item.row == 20) {
      window.location = "/arkansas";
    }
    if (item.row == 21) {
      window.location = "/louisiana";
    }
    if (item.row == 22) {
      window.location = "/mississippi";
    }
    if (item.row == 23) {
      window.location = "/georgia";
    }
    if (item.row == 24) {
      window.location = "/florida";
    }
    if (item.row == 25) {
      window.location = "/missouri";
    }
    if (item.row == 26) {
      window.location = "/iowa";
    }
    if (item.row == 27) {
      window.location = "/minnesota";
    }
    if (item.row == 28) {
      window.location = "/south_dakota";
    }
    if (item.row == 29) {
      window.location = "/north_dakota";
    }
    if (item.row == 30) {
      window.location = "/wyoming";
    }
    if (item.row == 31) {
      window.location = "/utah";
    }
    if (item.row == 32) {
      window.location = "/illinois";
    }
    if (item.row == 33) {
      window.location = "/maine";
    }
    if (item.row == 34) {
      window.location = "/vermont";
    }
    if (item.row == 35) {
      window.location = "/massachussets";
    }
    if (item.row == 36) {
      window.location = "/maryland";
    }
    if (item.row == 37) {
      window.location = "/delaware";
    }
    if (item.row == 38) {
      window.location = "/new_jersey";
    }
    if (item.row == 39) {
      window.location = "/south_carolina";
    }
    if (item.row == 40) {
      window.location = "/north_carolina";
    }
    if (item.row == 41) {
      window.location = "/michigan";
    }
    if (item.row == 42) {
      window.location = "/wisconsin";
    }
    if (item.row == 43) {
      window.location = "/kansas";
    }
    if (item.row == 44) {
      window.location = "/alaska";
    }
    if (item.row == 45) {
      window.location = "/hawaii";
    }
    if (item.row == 46) {
      window.location = "/rhode_island";
    }
    if (item.row == 47) {
      window.location = "/tamil_nadu/";
    }
    if (item.row == 48) {
      window.location = "/ohio";
    }
    if (item.row == 49) {
      window.location = "/west_virginia";
    }
    if (item.row == 50) {
      window.location = "/pennsylvania";
    }
    if (item.row == 51) {
      window.location = "/tennessee";
    }
    if (item.row == 52) {
      window.location = "/new_hampshire";
    }
  }

  google.visualization.events.addListener(chart, 'select', myClickHandler);
  chart.draw(data, options);
}
google.load('visualization', '1', {
  packages: ['geochart'],
  callback: drawMap
});

#regions {
  display: float:left;
}

<script type='text/javascript' src='http://www.google.com/jsapi'></script><table><tr><td><div id="mapcontainer">

</td><td>
  <ul class="regions">
    <li><a id="region_13" class="region" href="/montana">Montana</a></li>
    <li><a id="region_14" class="region" href="/nebraska">Nebraska</a>
    </li>
    <li><a id="region_15" class="region" href="/nevada">Nevada</a>
    </li>
    <li><a id="region_12" class="region" href="/new_hampshire">New Hampshire</a></li>

    <li><a id="region_14" class="region" href="/minnesota">Minnesota</a>
    </li>
    <li><a id="region_15" class="region" href="/mississippi">Mississippi</a>
    </li>
    <li><a id="region_12" class="region" href="/missouri">Missouri</a></li>

  </ul>
  </td></tr></table>

回答1:

1) GeoChart lacks many of the events and methods of other google charts,
including 'onmouseover'

to implement manually, we can use the regular dom event --> 'mouseover'

when this fires, dispatch a dom 'click' event

which will trigger the chart's 'select' event

the 'select' event can be used to get the value of the region that was clicked, or "moused over",

which can then be used to highlight the list entry

only problem then is separating the "mouseover click" events from the real click events

we can use a variable to save the last event that occurred,

then check the variable in the chart's 'select' event

2) 'select' event

for this chart, only one entity can be selected at any given moment,

no need to loop thru the selection array

also, when a region is clicked, it is selected

when the same region is clicked again, it is unselected

which means chart.getSelection() will return an empty array

we need to clear the chart's selection when the "mouseover click" event occurs

clearing the selection will ensure the region is selected when the real click event occurs

3) other notes...

as of September, 12 2016, the GeoChart no longer requires you to include the jsapi loader.

recommend using the newer library loader.js instead

according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

this will only change the load statement

also, you can use the data table to find the value of the region that was selected,

no need to use a bunch of if statements to determine the value

4) see following working snippet...

the data table is used to build the list of region links

when a region is "moused over", the link in the list will be highlighted

when a region is "clicked", it's name will be sent to the console,

which could easily be replaced with 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.getNumberOfRows(); i++) {
    regions.insertAdjacentHTML(
      'beforeEnd',
      '<li data-row="' + i + '"><a class="region" href="/' + data.getValue(i, 0) + '">' + data.getValue(i, 0) + '</a></li>'
    );
  }

  // 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 < regionLinks.length; i++) {
            var regionRow = parseInt(regionLinks[i].getAttribute('data-row'));
            regionLinks[i].style.backgroundColor = (regionRow === selection[0].row) ? 'cyan' : null;
            chart.setSelection([]);
          }
        } else {
          // click
          console.log("/" + data.getValue(selection[0].row, 0));
          //window.location = "/" + data.getValue(selection[0].row, 0);
        }
      }
    }
  }

  chart.draw(data, options);
}
google.charts.load('current', {
  packages:['geochart'],
  callback: drawMap
});

div {
  display: inline-block;
  vertical-align: top;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="mapcontainer"></div>
<div id="tablecontainer">
  <ul class="regions" id="regions"></ul>
</div>

来源：https://stackoverflow.com/questions/43564668/how-to-enable-hover-events-for-text-with-google-geochart