本文介绍了谷歌geochart设置选择国家的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有没有人知道我如何从点击标记国家？
我需要somehowe点击链接时选择该地图上的国家悬停。
does anyone have idea how I can mark country from click? I need somehowe when link is clicked to select that country on map as on hover.
我只是不明白如何从文档中使用setSelection functon：
I just dont understand how to use setSelection functon from documentation: https://developers.google.com/chart/interactive/docs/gallery/geochart#Example
以下是我的代码：
Here is my code:
<html>
<head>
<title>Geochart</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.min.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
function isNumber (o) {
return ! isNaN (o-0) && o !== null && o.replace(/^\s\s*/, '') !== "" && o !== false;
}
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
var chart;
var options = {
displayMode : 'regions',
colorAxis : {minValue: 0, maxValue : 100, colors: ['red', '#d1d2d4']},
legend: 'none',
region : '142',
tooltip : {
trigger: 'none'
},
backgroundColor : "#f8f8f8",
datalessRegionColor : "#d1d2d4"
};
function drawRegionsMap() {
var data = new google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600]
]);
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
var newColor = '#c94033';
google.visualization.events.addListener(chart, 'ready', function() {
if ($.browser.msie && $.browser.version < 9) {
$('#visualization').find('iframe').contents().on('hover', 'shape', function (e) {
if (e.type == 'mouseenter') {
if ($(this).prop('fillcolor') != '#f5f5f5' && $(this).prop('fillcolor') != 'none' && typeof($(this).prop('fillcolor')) != 'undefined') {
$(this).attr('baseColor', $(this).prop('fillcolor'));
$(this).prop('fillcolor', newColor);
}
}
else {
if (typeof($(this).attr('baseColor')) != 'undefined') {
$(this).prop('fillcolor', "#d1d2d4");
}
}
});
}
else {
$('#visualization').on('hover', 'path[fill!="#f5f5f5"][fill!="none"]', function (e) {
if (e.type == 'mouseenter') {
$(this).attr('baseColor', $(this).attr('fill'));
$(this).attr('fill', newColor);
}
else {
$(this).attr('fill', "#d1d2d4");
}
});
}
});
chart.draw(data, options);
google.visualization.events.addListener(chart, 'regionClick', function(e) {
var country = e.region;
if(isNumber(country)){
options.region = country;
drawRegionsMap();
$("#continents option").removeAttr("selected");
$("#continents option").each(function(){
if($(this).val() == country){
$(this).attr("selected", "selected");
}
})
}
});
};
$(document).ready(function(){
$("#continents").change(function(){
options.region = $(this).val();
drawRegionsMap();
});
$(".mark-country").click(function(){
var country_code = $(this).data("country-code");
alert("select country: " + country_code);
});
});
</script>
</head>
<body>
<div id='visualization' style="width: 700px; height: 420px; float: left;"></div>
<div style="float: left; margin-left: 10px;">
<a href='javascript: void(0);' data-country-code="DE" class="mark-country">Germany</a><br />
<a href='javascript: void(0);' data-country-code="US" class="mark-country">United States</a><br />
<a href='javascript: void(0);' data-country-code="BR" class="mark-country">Brazil</a><br />
<a href='javascript: void(0);' data-country-code="CA" class="mark-country">Canada</a><br />
<a href='javascript: void(0);' data-country-code="FR" class="mark-country">France</a> <br />
Select continent: <br />
<select id="continents">
<option value="002">Africa</option>
<option value="142" selected="selected">Asia</option>
<option value="150">Europe</option>
<option value="021">Northern America</option>
<option value="029">Caribbean</option>
<option value="013">Central America</option>
<option value="005">South America</option>
<option value="009">Oceania</option>
</select>
</div>
</body>
</html>
此处还有jsfiddle：
Also here is jsfiddle: http://jsfiddle.net/KS7L2/
推荐答案
以下是示例代码：
google.visualization.events.addListener(table, 'select', function () {
Geochart.setSelection(table.getSelection());
var selection = table.getSelection();
if (selection.length > 0) {
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: data.getColumnLabel(1),
calc: function (dt, row) {
return (selection[0].row == row) ? 2 : 1;
}
}]);
Geochart.draw(view, options);
}
else {
Geochart.draw(data, options);
}
});
Geochart.draw(data, options);
google.visualization.events.addListener(Geochart, 'select', function () {
table.setSelection(Geochart.getSelection());
var selection = Geochart.getSelection();
if (selection.length > 0) {
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: data.getColumnLabel(1),
calc: function (dt, row) {
return (selection[0].row == row) ? 2 : 1;
}
}]);
Geochart.draw(view, options);
}
else {
Geochart.draw(data, options);
}
});
Geochart.draw(data, options);
}
以下是工作示例。
希望这可以帮到你。
这篇关于谷歌geochart设置选择国家的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！