[英]How can I make the map's regions change color when hover the mouse over it?
I'm using the interactive map from codecanyon. 我正在使用来自codecanyon的交互式地图 。 I want to make a change so that the selected region changes color when the mouse is over it.
我要进行更改,以使所选区域在鼠标悬停在其上方时更改颜色。 I deployed an example where this is the code that does it.
我部署了一个示例 ,其中的代码就是这样做的。
<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>
Now I want the selected region to change color like in my mockup here. 现在,我希望选定的区域像在我的模型中一样更改颜色。 Can it be done?
能做到吗
You can accomplish this with a css rule. 您可以使用CSS规则完成此操作。 The hover rule applies to all your paths and the rect rule excludes your ocean so that only the land areas will highlight as you indicated.
悬停规则适用于您的所有路径,而rect规则不包括您的海洋,因此只有陆地区域将按照您的指示突出显示。 Each rule is preceded by an ID selector to keep the rules only applicable to the div your map loaded within.
每个规则之前都有一个ID选择器,以使这些规则仅适用于您的地图所加载的div。
<style xmlns="http://www.w3.org/2000/svg">
#visualization path:hover { fill: cornflowerblue; }
#visualization rect:hover {fill:transparent;}
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.