Javascript 将鼠标悬停在地图上时,如何使地图的区域更改颜色?
我用的是来自任何人的代码。我想做一个更改,使选定区域在鼠标悬停时改变颜色。我部署了一个应用程序,这就是实现它的代码Javascript 将鼠标悬停在地图上时,如何使地图的区域更改颜色?,javascript,geography,Javascript,Geography,我用的是来自任何人的代码。我想做一个更改,使选定区域在鼠标悬停时改变颜色。我部署了一个应用程序,这就是实现它的代码 <script type='text/javascript' src='http://www.google.com/jsapi'></script> <script type='text/javascript'>google.load('visualization', '1', {'packages': ['geochart']}); googl
<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>
现在,我希望所选区域像在我的模型中一样更改颜色。能做到吗
您可以使用css规则来实现这一点。
悬停规则适用于所有路径,而rect规则不包括海洋,因此只有陆地区域将高亮显示,如您所示。
每个规则前面都有一个ID选择器,以使规则仅适用于加载地图的div
<style xmlns="http://www.w3.org/2000/svg">
#visualization path:hover { fill: cornflowerblue; }
#visualization rect:hover {fill:transparent;}
</style>
您可以使用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,这是一个很好的链接。您可以看看我为这个问题创建的代码,它用最少的代码来表示这个问题。为了我的问题。我想将div并排对齐。现在,框架似乎不允许以我所知道的方式来实现这一点。应该注意的是,如果您所在的国家是您所在的地区:它不会改变整个国家的填充颜色。只有你盘旋过的那块陆地。i、 e.在美国大陆上空盘旋会使阿拉斯加变成以前的颜色。@EoghanTadhg这是一个很好的观点。我认为你肯定需要利用JavaScript来解决这个问题。修改了答案,将海洋从悬停突出显示中排除。我认为这是可以接受的,因为它似乎符合问题的意图。如果没有,我将删除修改。谢谢。这是一个很好的回答。现在我创建了一个最小的[fiddle]@runDOSrun,这是一个很好的链接。您可以看看我为这个问题创建的代码,它用最少的代码来表示这个问题。为了我的问题。我想将div并排对齐。现在,框架似乎不允许以我所知道的方式来实现这一点。应该注意的是,如果您所在的国家是您所在的地区:它不会改变整个国家的填充颜色。只有你盘旋过的那块陆地。i、 e.在美国大陆上空盘旋会使阿拉斯加变成以前的颜色。@EoghanTadhg这是一个很好的观点。我认为您肯定需要利用JavaScript来解决这个问题。