概览
地理地图是国家/地区、洲或区域的地图，其中有指定给特定区域的颜色和值。值以色阶表示，您可以选择为区域指定悬停文本。系统会利用嵌入式 Flash 播放器在浏览器中呈现地图。请注意，地图不可滚动或拖动，但可以配置为允许缩放。
示例
这里我们有两个示例：一个使用区域显示样式，另一个使用标记显示样式。
地区示例
“地区”样式会使用与您指定的值相对应的颜色填充整个地区（通常是国家/地区）。通过在代码中分配 options['dataMode']
= 'regions' 来指定区域样式。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geomap'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
options['dataMode'] = 'regions';
var container = document.getElementById('regions_div');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
标记示例
“标记”样式会在您指定的区域上显示一个圆形，其大小和颜色分别代表一个值。
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['geomap']});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Popularity'],
['New York', 200],
['Boston', 300],
['Miami', 400],
['Chicago', 500],
['Los Angeles', 600],
['Houston', 700]
]);
var options = {};
options['region'] = 'US';
options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
options['dataMode'] = 'markers';
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
正在加载
google.charts.load 软件包名称为 "geomap"
google.charts.load('current', {'packages': ['geomap']});
地理地图可视化类名称为 google.visualization.GeoMap
var visualization = new google.visualization.GeoMap(container);
数据格式
支持两种地址格式，每种地址格式支持的列数不同，且每列的数据类型各不相同。表中的所有地址都必须使用一种方式；不能混用类型。
- 格式 1：经纬度位置。仅当
dataMode选项为“markers”时，此格式才有效。如果采用此格式，则无需添加 Google 地图 JavaScript。该地理位置会分两列输入，另加两个可选列：- [数字，必填] 纬度。正数表示北方，负数表示南方。
- [数字，必填] 经度。正数表示东，负数表示西。
- [数字，可选] 用户将鼠标悬停在此区域上时显示的数值。如果使用第 4 列，则此列为必填列。
- [字符串，可选] 用户将鼠标悬停在此区域上时显示的其他字符串文本。
- 格式 2：地址、国家/地区名称、地区名称位置或美国大都市区号。此格式适用于设置为“markers”或“regions”的
dataMode选项。在一列中输入位置，以及以下两个可选列：- [字符串，必需] 地图位置。接受以下格式：
- 具体地址（例如“宾夕法尼亚大街 1600 号”）。
- 字符串形式的国家/地区名称（例如“英国”），或者大写 ISO-3166 代码或其对应的英语文本（例如“GB”或“英国”）。
- 大写的 ISO-3166-2 区域代码名称或对应的英文文本（例如“US-NJ”或“New Jersey”）。注意：只有在 dataMode 选项设置为“regions”时，才能指定区域。
- 都市区号。这些是用于表示不同区域的三位数都市圈代码；仅支持美国代码。请注意，这些区号与电话区号不同。
- [数字，可选] 用户将鼠标悬停在此区域上时显示的数值。如果使用第 3 列，则此列为必填列。
- [字符串，可选] 用户将鼠标悬停在此区域上时显示的其他字符串文本。
- [字符串，必需] 地图位置。接受以下格式：
注意：一个地图最多可以显示 400 个条目；如果您的 DataTable 或 DataView 保存的行超过 400 行，则只会显示前 400 行。最快的模式是 dataMode='regions'（位置指定为 ISO 代码）和 dataMode='markers'（带纬度/经度元素）。最慢的模式是带有字符串地址的 dataMode='markers'。
重要提示：DataTable 必须包含您要使用的任何列前面的所有可选列。例如，如果您要指定纬度/经度表，并且只想使用列 1、2 和 4，则 DataTable 仍然必须定义列 3（但您无需向其添加任何值）：
dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');
dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");
配置选项
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
region |
string | “世界” | 要在地图上显示的区域。（周围区域也会显示。）可以是国家/地区代码（采用大写的 ISO-3166 格式），也可以是以下字符串之一：
地理分布图不支持滚动或拖动行为，仅限制了缩放行为。通过设置 |
dataMode |
string | “地区” | 如何在地图上显示值。支持以下两个值： |
width |
string | “556 像素” | 可视化图表的宽度。如果未指定单位，则默认单位为像素。 |
height |
string | “347 像素” | 可视化图表的高度。如果未指定单位，则默认单位为像素。 |
colors |
格式为 0xRRGGBB 的 RGB 数字数组 | [0xE0FFD4、0xA5EF63、0x50AA00、0x267114] | 要分配给可视化图表中的值的颜色渐变。您必须至少有两个值；渐变色将包含所有值，外加计算得出的中间值，其中最浅的颜色是最小值，最深的颜色是最高值。 |
showLegend |
boolean | true | 如果为 true，则显示地图的图例。 |
showZoomOut |
boolean | false | 如果为 true，则显示带有 zoomOutLabel 属性所指定标签的按钮。请注意，点击此按钮时，它不会执行任何操作，只是抛出 zoomOut 事件。
如需处理缩放操作，请捕获此事件并更改 region 选项。只有当 region 选项小于世界视图时，您才能指定 showZoomOut。启用放大行为的一种方法是，监听 regionClick 事件，将 region 属性更改为相应的区域，然后重新加载地图。 |
zoomOutLabel |
string | “缩小” | 缩放按钮的标签。 |
方法
| 方法 | 返回值类型 | 说明 |
|---|---|---|
draw(data, options) |
无 | 绘制地图。可以在绘制完成之前返回（请参阅 drawingDone() 事件）。 |
getSelection() |
选择元素数组 | 标准 getSelection() 实现。所选元素是行。仅当 dataMode 选项为“regions”时，此方法才有效。您只能选择已分配值的区域。 |
setSelection(selection) |
无 | 标准的 setSelection() 实现。将选定项视为行选择，并支持多行选择。只能选择已分配值的区域。 |
事件
| 名称 | 说明 | 属性 |
|---|---|---|
error |
尝试渲染图表时出错时触发。 | id、message |
select |
当用户点击带有指定值的区域时触发。如需了解所选内容，请调用 注意：由于某些限制，如果您在浏览器中以文件（例如 |
无 |
regionClick |
在点击区域时调用。同时适用于“区域”和“标记” 注意：由于某些限制，如果您在浏览器中以文件（例如 |
具有单个属性 region 的对象，该属性是一个 ISO-3166 格式的字符串，用于描述所点击的区域。 |
zoomOut |
在点击缩小按钮时调用。如需处理缩放操作，请捕获此事件并更改 注意：由于某些限制，如果您在浏览器中以文件（例如 |
无 |
drawingDone |
在地理分布图绘制完毕时调用。 | 无 |
数据政策
地点由 Google 地图进行地理编码。任何不需要地理编码的数据都不会发送到任何服务器。如需详细了解其数据政策，请参阅 Google 地图服务条款。
说明
由于 Flash 安全设置，当从浏览器的文件位置（如 file:///c:/webhost/myhost/myviz.html）而不是从网络服务器网址（如 http://www.myhost.com/myviz.html）进行访问时，此（以及所有基于 Flash 的可视化）可能无法正常运行。这通常只是测试问题。您可以按照 Macromedia 网站上的说明来解决此问题。