我正在尝试使用Google GeoChart API选择状态。
选择状态后，我希望看到它突出显示。但是，相反，我得到了一个错误。
执行以下操作来重新创建问题：
Open this jsBin。
点击地图上的州。
观察错误：
ReferenceError：未在selectHandler上定义数据...
我认为问题出在标有selectHandler的函数中。看来我的参数没有正确传递到函数中。
<!DOCTYPE html>
<html>
<head>
<!---- >
https://developers.google.com/chart/interactive/docs/gallery/geochart#full
<!---->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['geochart']
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var ar = [
//['Code', 'Select', 'State'],
['US-AK', 0, 'Alaska'],
['US-AL', 0, 'Alabama'],
['US-AR', 0, 'Arkansas'],
['US-AZ', 0, 'Arizona'],
['US-CA', 0, 'California'],
['US-CO', 0, 'Colorado'],
['US-CT', 0, 'Connecticut'],
['US-DE', 0, 'Delaware'],
['US-FL', 0, 'Florida'],
['US-GA', 0, 'Georgia'],
['US-HI', 0, 'Hawaii'],
['US-IA', 0, 'Iowa'],
['US-ID', 0, 'Idaho'],
['US-IL', 0, 'Illinois'],
['US-IN', 0, 'Indiana'],
['US-KS', 0, 'Kansas'],
['US-KY', 0, 'Kentucky'],
['US-LA', 0, 'Louisiana'],
['US-MA', 0, 'Massachusetts'],
['US-MD', 0, 'Maryland'],
['US-ME', 0, 'Maine'],
['US-MI', 0, 'Michigan'],
['US-MN', 0, 'Minnesota'],
['US-MO', 0, 'Missouri'],
['US-MS', 0, 'Mississippi'],
['US-MT', 0, 'Montana'],
['US-NC', 0, 'North Carolina'],
['US-ND', 0, 'North Dakota'],
['US-NE', 0, 'Nebraska'],
['US-NH', 0, 'New Hampshire'],
['US-NJ', 0, 'New Jersey'],
['US-NM', 0, 'New Mexico'],
['US-NV', 0, 'Nevada'],
['US-NY', 0, 'New York'],
['US-OH', 0, 'Ohio'],
['US-OK', 0, 'Oklahoma'],
['US-OR', 0, 'Oregon'],
['US-PA', 0, 'Pennsylvania'],
['US-RI', 0, 'Rhode Island'],
['US-SC', 0, 'South Carolina'],
['US-SD', 0, 'South Dakota'],
['US-TN', 0, 'Tennessee'],
['US-TX', 0, 'Texas'],
['US-UT', 0, 'Utah'],
['US-VA', 0, 'Virginia'],
['US-VT', 0, 'Vermont'],
['US-WA', 0, 'Washington'],
['US-WI', 0, 'Wisconsin'],
['US-WV', 0, 'West Virginia'],
['US-WY', 0, 'Wyoming'],
],
dataTable = computeDataTable(ar);
//data = google.visualization.arrayToDataTable(ar);
function computeDataTable(array) {
out = new google.visualization.DataTable();
out.addColumn('string', 'Code');
out.addColumn('number', 'Select');
out.addColumn({
type: 'string',
role: 'tooltip'
});
out.addRows(array);
return out;
}
var options = {
region: 'US',
displayMode: 'regions',
resolution: 'provinces', // 'metro'
legend: 'none',
animation: {
easing: 'inAndOut',
startup: true,
duration: 2500,
},
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart'));
function selectHandler(func, ar) {
var selectedItem = chart.getSelection();
if (selectedItem) {
var row = selectedItem[0].row,
value = data.getValue(row, 0),
isSelected = !data.getValue(row, 1);
//console.log(row);
ar[row][1] = isSelected ? 1 : 0;
//data = google.visualization.arrayToDataTable(ar);
data = func(ar);
//alert(value+", "+isSelected);
//console.log('The user selected: ' + value);
//console.log('isSelected: ' + isSelected);
//console.log(JSON.stringify(data));
chart.draw(data, options);
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="geochart" style="width: 900px; height: 500px;"></div>
</body>
</html>
最佳答案
以此替换您的selectHandler
function selectHandler() {
var selectedItem = chart.getSelection();
if (selectedItem) {
var row = selectedItem[0].row;
var isSelected = !dataTable.getValue(row, 1);
dataTable.setValue(row, 1, isSelected ? 1 : 0);
chart.draw(dataTable, options);
}
}
基本思想是不要变异基础的
ar数组。使用dataTable setValue和getValue代替。