将鼠标悬停在地图上时，如何使地图的区域改变颜色？

Posted 2023-02-23

【中文标题】将鼠标悬停在地图上时，如何使地图的区域改变颜色？

【英文标题】：How can I make the map's regions change color when hover the mouse over it?

【发布时间】：2015-02-13 18:24:02

【问题描述】：

我正在使用来自 codecanyon 的 interactive map。我想进行更改，以便当鼠标悬停在选定区域上时，它会改变颜色。我部署了一个example，这是执行此操作的代码。

<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>

现在我希望所选区域改变颜色，就像我在此处的样机中一样。能做到吗？

【参考方案1】：

Plnkr Example

您可以使用 css 规则来完成此操作。 悬停规则适用于您的所有路径，而 rect 规则不包括您的海洋，因此只有陆地区域会按照您的指示突出显示。 每个规则前面都有一个 ID 选择器，以使规则仅适用于加载地图的 div。

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

【讨论】：

修改了答案以从悬停突出显示中排除海洋。我认为这是可以接受的，因为它似乎符合问题的意图。如果没有，我将删除修改。

谢谢。这是一个很好的答案。现在我已经为我的问题创建了一个最小的 [fiddle]（@runDOSrun 这是一个很好的链接。您可以查看fiddle我为问题创建的问题，用最少的代码来表示问题。）。我想并排对齐 div。现在框架似乎不允许以我知道的方式完成。

需要注意的是，如果你的国家是你的地区：它不会改变整个国家的填充颜色。只有你盘旋过的陆地。 （即在美国大陆上空盘旋会使阿拉斯加变成以前的颜色）。

@EoghanTadhg 这是一个很好的观点。我认为你肯定需要利用 JavaScript 来解决这个问题。