我正在创建一个谷歌地理图表,其中包括美国、韩国、台湾、中国和印度的城市。如果我使用 regions: 'world'
tshe map 太大,城市气泡几乎看不到。我正在使用以下选项:
var options = {
region: 'world',
displayMode: 'markers',
resolution: 'provinces'
}
是否可以创建包含两个或多个区域的 map ?
例如,美国和亚洲。我正在考虑使用以下内容设置区域:
var options = {
region: '019','142',
displayMode: 'markers',
resolution: 'provinces'
}
最佳答案
不,不可能在同一张 map 上创建包含两个区域的 map 。
原因是 Google 地理图表依赖于它们显示的任何区域的 SVG 图像,并且 API 中存在数量有限的 SVG map (这就是为什么有些国家不使用 resolution: 'provinces'
的原因)。
但是,可以创建包含两个区域数据的数据表,并使用相同的数据表填充两个单独的 map (每个区域一个)。
例如:
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geochart']});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
// Draw First Chart
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, {width: 556, height: 347, region: '019', resolution: 'countries'});
// Draw Second Chart
var geochart2 = new google.visualization.GeoChart(
document.getElementById('visualization2'));
geochart2.draw(data, {width: 556, height: 347, region: '150', resolution: 'countries'});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization"></div>
<div id="visualization2"></div>
</body>
</html>
另请注意,“美洲”区域(019)与世界地图一样高,实际上不会为您节省“世界”上的任何空间。如果加拿大或墨西哥没有任何标记,我建议使用北美或仅使用“美国”。
关于google-visualization - 在同一张 map 中显示多个谷歌图表区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16556121/