概览
地理图是指国家/地区、洲或区域的地图,其中包含颜色和值应分配给特定区域。值以色标显示,您可以为区域指定可选的悬停文本。地图使用嵌入式 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
选项是“标记”时有效。如果使用这种格式,则无需添加 Google 地图 JavaScript。此位置在两列中输入,外加两列(可选):- [数字,必填] 纬度。正数表示北,负数表示南。
- [数字,必填] 经度。正数表示东方,负数表示西方。
- [Number, Optional] 当用户将鼠标悬停在此区域上时,系统会显示一个数值。如果使用的是第 4 列,则必须提供此列。
- [字符串,可选] 用户将鼠标悬停在此区域上时显示的其他字符串文本。
- 格式 2:地址、国家/地区名称、地区名称位置或美国都市圈代码。此格式适用于设置为“标记”或“区域”的
dataMode
选项。此位置在一列中输入,外加两列(可选):- [String, required] 表示地图位置。接受以下格式:
- 具体地址(例如“北京市东城区王府井大街 19 号”)。
- 国家/地区名称,以字符串表示(例如“英格兰”)、大写 ISO-3166 代码或其英文文本等效项(例如“GB”或“英国”)。
- 大写的 ISO-3166-2 区域代码名称,或其英文等效文本(例如“US-NJ”或“New Jersey”)。注意:只有在 dataMode 选项设置为“regions”时,才能指定区域。
- 都市区号。这些三位数的都市圈代码用于指定各种区域;仅支持美国代码。请注意,这些代码与电话区号不同。
- [Number, Optional] 当用户将鼠标悬停在此区域上时,系统会显示一个数值。如果使用的是第 3 列,则必须填写此列。
- [字符串,可选] 用户将鼠标悬停在此区域上时显示的其他字符串文本。
- [String, required] 表示地图位置。接受以下格式:
注意:一个地图最多可显示 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 |
字符串 | “world” | 要在地图上显示的区域。(系统还会显示周围的环境。)可以是国家/地区代码(采用大写的 ISO-3166 格式),也可以是以下字符串之一:
地理图不会启用滚动或拖动行为,只会启用有限的缩放行为。您可以通过设置 |
dataMode |
字符串 | “区域” | 如何在地图上显示值。系统支持以下两个值: |
width |
字符串 | “556px” | 可视化图表的宽度。如果未指定单位,则默认单位为像素。 |
height |
字符串 | “347px” | 可视化图表的高度。如果未指定单位,则默认单位为像素。 |
colors |
RGB 数字数组,格式为 0xRRGGBB | [0xE0FFD4、0xA5EF63、0x50AA00、0x267114] | 要分配给可视化图表中值的颜色渐变。您必须至少提供两个值;渐变将包含您的所有值以及计算得出的中间值,其中最小颜色为最小值,最深颜色为最高值。 |
showLegend |
布尔值 | true | 如果为 true,则显示地图的图例。 |
showZoomOut |
布尔值 | false | 如果为 true,则显示一个带有 zoomOutLabel 属性指定的标签的按钮。请注意,除了抛出 zoomOut 事件外,该按钮在用户点击时不会执行任何操作。
如需处理缩放操作,请捕获此事件并更改 region 选项。
仅当 region 选项小于世界视图时,您才能指定 showZoomOut 。启用放大行为的一种方式是监听 regionClick 事件,将 region 属性更改为适当的区域,然后重新加载地图。 |
zoomOutLabel |
字符串 | “缩小” | 缩放按钮的标签。 |
方法
方法 | 返回值类型 | 说明 |
---|---|---|
draw(data, options) |
无 | 绘制地图。可以在绘制完成之前返回(请参阅 drawingDone() 事件)。 |
getSelection() |
选择元素数组 | 标准 getSelection() 实现。所选元素是行。此方法仅在 dataMode 选项为“regions”时有效。您只能选择具有指定值的区域。 |
setSelection(selection) |
无 | 标准 setSelection() 实现。将所选内容视为行选择,并且支持多行选择。只能选择具有指定值的区域。 |
事件
名称 | 说明 | 属性 |
---|---|---|
error |
尝试渲染图表出错时触发。 | id、message |
select |
用户点击具有指定值的区域时会触发此事件。如需了解所选内容,请调用 注意:由于存在某些限制,因此,如果您在浏览器中将网页作为文件(例如"file://"),而不是服务器(例如“http://www”)。 |
无 |
regionClick |
点击某个区域时调用。同时适用于“区域”和“标记” 注意:出于某些限制,如果您以文件(例如"file://"),而不是服务器(例如“http://www”)。 |
具有单个属性 region 的对象,该对象是一个 ISO-3166 格式的字符串,用于说明所点击的区域。 |
zoomOut |
在用户点击缩小按钮时调用。如需处理缩放操作,请捕获此事件并更改 注意:由于存在某些限制,因此,如果您在浏览器中将网页作为文件(例如"file://"),而不是服务器(例如“http://www”)。 |
无 |
drawingDone |
在地理图绘制完毕时调用。 | 无 |
数据政策
Google 将对营业地点进行地理编码。任何不需要地理编码的数据都不会发送到任何服务器。 请参阅 Google 地图服务条款,详细了解其数据政策。
说明
根据 Flash 安全设置,如果从浏览器的文件位置(如 file:///c:/webhost/myhost/myviz.html)而不是网络服务器网址(如 http://www.myhost.com/myviz.html)访问 Flash,则此类情况(以及所有基于 Flash 的可视化效果)可能无法正常运行。这通常只是一个测试问题。如 Macromedia 网站中所述,您可以解决此问题。