我正在构建一个简单的应用程序,它将根据州名标记印度的州。
所以,我开始尝试以下示例。
如果我设置displayMode : 'markers'
但它们的documentation状态可以显示为区域,则效果很好。
但是,它不起作用。我做错了吗?
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State'],
['West Bengal'],
]);
var options = {
region: 'IN',
displayMode: 'regions',
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
答案 0 :(得分:6)
您需要将选项设置为resolution: 'provinces'
这是代码(工作):
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Data'],
['West Bengal', 5],
]);
var options = {
region: 'IN',
displayMode: 'regions',
resolution: 'provinces',
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>