將鼠標懸停在地圖上時，如何使地圖的區域變色？

Question

我正在使用來自codecanyon的交互式地圖 。 我要進行更改，以使所選區域在鼠標懸停在其上方時更改顏色。 我部署了一個示例 ，其中的代碼就是這樣做的。

<script type='text/javascript' src='http://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', 'Country');
 data.addColumn('number', 'Value'); 
 data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array();

 var options = {
 backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },
 colorAxis:  {minValue: 0, maxValue: 0,  colors: []},
 legend: 'none',    
 backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:25 },   
 datalessRegionColor: '#ffc801',
 displayMode: 'regions', 
 enableRegionInteractivity: 'true', 
 resolution: 'provinces',
 sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
 region:'IN',
 keepAspectRatio: true,
 width:600,
 height:400,
 tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}   
 };
  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.location = ivalue[selectedRegion];  }
  }
  });
 chart.draw(data, options);
 }
 </script>
 <div id='visualization'></div>

現在，我希望選定的區域像在我的模型中一樣更改顏色。 能做到嗎

Answer 1

Plnkr示例

您可以使用CSS規則完成此操作。 懸停規則適用於您的所有路徑，而rect規則不包括您的海洋，因此只有陸地區域將按照您的指示突出顯示。 每個規則之前都有一個ID選擇器，以使這些規則僅適用於您的地圖所加載的div。

<style xmlns="http://www.w3.org/2000/svg">
    #visualization path:hover { fill: cornflowerblue; }
    #visualization rect:hover {fill:transparent;}
</style>