概览
Google 地图图表使用 Google Maps API 显示地图。数据值在地图上显示为标记。数据值可以是坐标（经纬度对）或地址。系统会对地图进行缩放，使其包含所有已识别的点。
如果您希望地图是素描而不是卫星图像，请改用地理图表。
命名的地理位置
您可以按名称标识放置标记的位置，如下方这份人口数量最多的前十个国家/地区中的这张地图所示。
当用户选择其中一个标记时，系统会显示包含该国家/地区名称和人口的提示。这是因为我们使用了 showInfoWindow 选项。此外，当用户将鼠标悬停在某个标记上片刻时，系统会显示“标题”提示，其中包含相同的信息，因为我们使用了 showTooltip 选项。
完整的 HTML 如下所示：
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['map'],
// 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', 'Population'],
['China', 'China: 1,363,800,000'],
['India', 'India: 1,242,620,000'],
['US', 'US: 317,842,000'],
['Indonesia', 'Indonesia: 247,424,598'],
['Brazil', 'Brazil: 201,032,714'],
['Pakistan', 'Pakistan: 186,134,000'],
['Nigeria', 'Nigeria: 173,615,000'],
['Bangladesh', 'Bangladesh: 152,518,015'],
['Russia', 'Russia: 146,019,512'],
['Japan', 'Japan: 127,120,000']
]);
var options = {
showTooltip: true,
showInfoWindow: true
};
var map = new google.visualization.Map(document.getElementById('chart_div'));
map.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
经过地理编码的位置
您还可以按纬度和经度指定位置，其加载速度比指定位置更快：
上图按纬度和经度标识了四个位置。
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
"packages":["map"],
// 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(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, {
showTooltip: true,
showInfoWindow: true
});
}
</script>
</head>
<body>
<div id="map_div" style="width: 400px; height: 300px"></div>
</body>
</html>
自定义标记
您可以使用位于网络其他位置的标记形状。下面是一个使用 iconarchive.com 的蓝色图钉的示例：
如果您在上图中选择图钉，它们就会倾斜。支持 PNG、GIF 和 JPG。
var options = {
icons: {
default: {
normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
}
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
"packages":["map"],
// 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(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
var options = {
icons: {
default: {
normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_markers_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_markers_div" style="width: 400px; height: 300px"></div>
</body>
</html>
添加多个标记集
除了创建一组默认标记外，您还可以创建多组标记。
要创建其他标记集，请将 ID 添加到 icons 选项中，并设置标记图像。然后，向数据表格中添加一列，并设置您希望为数据表中的每一行使用的标记集的 ID（您也可以使用 'default' 或 null 使用默认标记）。
var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';
var options = {
zoomLevel: 6,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
icons: {
blue: {
normal: url + 'Map-Marker-Ball-Azure-icon.png',
selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
},
green: {
normal: url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
},
pink: {
normal: url + 'Map-Marker-Ball-Pink-icon.png',
selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
}
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['map'],
// 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 = new google.visualization.DataTable();
data.addColumn('string', 'Address');
data.addColumn('string', 'Location');
data.addColumn('string', 'Marker')
data.addRows([
['New York City NY, United States', 'New York', 'blue' ],
['Scranton PA, United States', 'Scranton', 'green'],
['Washington DC, United States', 'Washington', 'pink' ],
['Philadelphia PA, United States', 'Philly', 'green'],
['Pittsburgh PA, United States', 'Pittsburgh', 'green'],
['Buffalo NY, United States', 'Buffalo', 'blue' ],
['Baltimore MD, United States', 'Baltimore', 'pink' ],
['Albany NY, United States', 'Albany', 'blue' ],
['Allentown PA, United States', 'Allentown', 'green']
]);
var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';
var options = {
zoomLevel: 6,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
icons: {
blue: {
normal: url + 'Map-Marker-Ball-Azure-icon.png',
selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
},
green: {
normal: url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
},
pink: {
normal: url + 'Map-Marker-Ball-Pink-icon.png',
selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>
设置地图样式
地图可视化能够设置自定义样式，让您能够创建一个或多个自定义地图类型。
您可以通过创建地图样式对象并将其放置在地图选项下的标识符 (mapTypeId) 下，来定义自定义地图类型。例如：
var options = {
maps: {
<map style ID>: <map style object>
}
};
您稍后可以按照分配给自己的地图样式 ID 来引用此自定义地图类型。
您的地图样式对象包含一个 name（将成为地图类型控件中的显示名称）（不一定要与其 mapTypeId 匹配）和一个 styles 数组（其中包含您要设置样式的每个元素的样式对象）。Google Maps API 参考文档中包含了各种元素、地图项和样式类型的列表，您可以使用这些类型来创建自定义地图类型。
注意：您的自定义 mapTypeId 必须放置在 maps 选项下。
var options = {
mapType: 'styledMap',
zoomLevel: 12,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
maps: {
// Your custom mapTypeId holding custom map styles.
styledMap: {
name: 'Styled Map', // This name will be displayed in the map type control.
styles: [
{featureType: 'poi.attraction',
stylers: [{color: '#fce8b2'}]
},
{featureType: 'road.highway',
stylers: [{hue: '#0277bd'}, {saturation: -50}]
},
{featureType: 'road.highway',
elementType: 'labels.icon',
stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
},
{featureType: 'landscape',
stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
}
]}}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['map'],
// 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 = new google.visualization.DataTable();
data.addColumn('string', 'Address');
data.addColumn('string', 'Location');
data.addRows([
['Lake Buena Vista, FL 32830, United States', 'Walt Disney World'],
['6000 Universal Boulevard, Orlando, FL 32819, United States', 'Universal Studios'],
['7007 Sea World Drive, Orlando, FL 32821, United States', 'Seaworld Orlando' ]
]);
var options = {
mapType: 'styledMap',
zoomLevel: 12,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
maps: {
// Your custom mapTypeId holding custom map styles.
styledMap: {
name: 'Styled Map', // This name will be displayed in the map type control.
styles: [
{featureType: 'poi.attraction',
stylers: [{color: '#fce8b2'}]
},
{featureType: 'road.highway',
stylers: [{hue: '#0277bd'}, {saturation: -50}]
},
{featureType: 'road.highway',
elementType: 'labels.icon',
stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
},
{featureType: 'landscape',
stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
}
]}}
};
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>
除了创建自定义地图类型外，您还可以使用 mapTypeIds 选项指定用户可以在地图类型控件中查看的地图。默认情况下，所有地图类型（包括自定义地图类型）都会显示在地图类型控件中。mapTypeIds 选项用于接受您希望用户查看的地图类型字符串数组。这些字符串必须引用默认地图样式（即正常地图、卫星地图、地形地图、混合地图）的预定义名称，或您定义的自定义地图类型的地图样式 ID。设置 mapTypeIds 选项后，您的地图将仅提供您在此数组中指定的地图类型。
您还可以将此属性与 mapType 选项结合使用，以将地图样式设置为默认样式，但不要将其包含在 mapTypeIds 数组中。这样，该地图将仅在初始加载时显示。
var options = {
mapType: 'styledMap',
zoomLevel: 7,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
// User will only be able to view/select custom styled maps.
mapTypeIds: ['styledMap', 'redEverything', 'imBlue'],
maps: {
styledMap: {
name: 'Styled Map',
styles: [
{featureType: 'poi.attraction',
stylers: [{color: '#fce8b2'}]},
{featureType: 'road.highway',
stylers: [{hue: '#0277bd'}, {saturation: -50}]},
{featureType: 'road.highway', elementType: 'labels.icon',
stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]},
{featureType: 'landscape',
stylers: [{hue: '#259b24'}, {saturation: 10},{lightness: -22}]}
]},
redEverything: {
name: 'Redden All The Things',
styles: [
{featureType: 'landscape',
stylers: [{color: '#fde0dd'}]},
{featureType: 'road.highway',
stylers: [{color: '#67000d'}]},
{featureType: 'road.highway', elementType: 'labels',
stylers: [{visibility: 'off'}]},
{featureType: 'poi',
stylers: [{hue: '#ff0000'}, {saturation: 50}, {lightness: 0}]},
{featureType: 'water',
stylers: [{color: '#67000d'}]},
{featureType: 'transit.station.airport',
stylers: [{color: '#ff0000'}, {saturation: 50}, {lightness: -50}]}
]},
imBlue: {
name: 'All Your Blues are Belong to Us',
styles: [
{featureType: 'landscape',
stylers: [{color: '#c5cae9'}]},
{featureType: 'road.highway',
stylers: [{color: '#023858'}]},
{featureType: 'road.highway', elementType: 'labels',
stylers: [{visibility: 'off'}]},
{featureType: 'poi',
stylers: [{hue: '#0000ff'}, {saturation: 50}, {lightness: 0}]},
{featureType: 'water',
stylers: [{color: '#0288d1'}]},
{featureType: 'transit.station.airport',
stylers: [{color: '#0000ff'}, {saturation: 50}, {lightness: -50}]}
]}
}
};
正在加载
google.charts.load 软件包名称为 "map"。
请注意，您需要为项目获取自己的 mapsApiKey，而不是简单地复制此处的示例中使用的代码，以避免用户地图数据服务的降级。如需了解详情，请参阅加载设置。
google.charts.load("current", {
"packages":["map"],
// 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.visualization.Map。由于缩短后的名称 Map 与 JavaScript Map 类冲突，因此当您指定 chartType: 'Map' 时，ChartWrapper 不会自动加载此软件包。不过，您可以改为指定 chartType: 'google.visualization.Map'。
var visualization = new google.visualization.Map(container);
数据格式
支持两种备选数据格式：
- 经纬度对 - 前两列应分别为数字的纬度和经度。可选的第三列包含一个字符串，用于描述前两列中指定的位置。
- 字符串地址 - 第一列应为包含地址的字符串。此地址应尽可能完整。可选的第二列包含一个字符串，用于描述第一列中的位置。字符串地址的加载速度较慢，尤其是当您的地址超过 10 个时。
注意：纬度/经度对选项加载地图的速度要快得多，尤其是在处理大型数据时。对于大型数据集，我们建议您使用此选项。请访问 Google Maps API，了解如何将您的地址转换为经纬度点。地图最多可显示 400 个条目；如果您的数据超过 400 行，则将只显示前 400 行。
配置选项
| 名称 | |
|---|---|
| enableScrollWheel |
如果设置为 true，则允许使用鼠标滚轮缩放。 类型：布尔值
默认：false
|
| 图标 |
存放多组自定义标记。每个标记集都可以指定 var options = {
icons: {
default: {
normal: '/path/to/marker/image',
selected: '/path/to/marker/image'
},
customMarker: {
normal: '/path/to/other/marker/image',
selected: '/path/to/other/marker/image'
}
}
};
Type：对象
默认：null
|
| 线颜色 |
如果 showLine 为 true，则定义线条颜色。例如：“#800000”。 类型：字符串
默认：默认颜色
|
| 线宽 |
如果 showLine 为 true，定义线宽（以像素为单位）。 类型：数字
默认：10
|
| maps.<mapTypeId> |
包含自定义地图类型属性的对象。该自定义地图类型将由您为自定义地图类型指定的
Type：对象
默认：null
|
| maps.<mapTypeId>.name |
当 类型：字符串
默认：null
|
| maps.<mapTypeId>.styles |
存放自定义地图类型各元素的样式对象。
每个样式对象都可以包含 1-3 个属性： {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}
如需详细了解不同的地图项、元素和样式器，请参阅 Google 地图文档。 类型：数组
默认：null
|
| mapType |
要显示的地图类型。可能的值有“normal”“地形”“卫星”“hybrid”或自定义地图类型的 ID（如果已创建）。 类型：字符串
默认：“混合”
|
| mapTypeId |
如果使用地图类型控件 ( 类型：数组
默认：null
|
| 显示信息窗口 |
如果设置为 true，则在用户选择点标记后，在单独的窗口中显示位置说明。此选项以前称为 类型：布尔值
默认：false
|
| ShowLine |
如果设置为 true，则通过所有点显示 Google 地图多段线。 类型：布尔值
默认：false
|
| 显示工具提示 |
如果设置为 true，则在将鼠标放在点标记上方时，系统会显示位置说明作为提示。此选项以前称为 类型：布尔值
默认：false
|
| 使用 MapTypeControl |
显示地图类型选择器，让查看者可以在 [地图、卫星、混合、地形] 之间切换。当 useMapTypeControl 为 false（默认）时，不会显示选择器，并且类型由 mapType 选项决定。 类型：布尔值
默认：false
|
| zoomLevel |
表示地图初始缩放级别的整数，其中 0 表示完全缩小（整个世界），19 表示最大缩放级别。 （请参阅 Google Maps API 中的“缩放级别”。） 类型：数字
默认：自动
|
方法
| 方法 | |
|---|---|
draw(data, options) |
绘制地图。 返回值类型：无
|
getSelection() |
标准 返回值类型：一组选择元素
|
setSelection(selection) |
标准 返回值类型：无
|
事件
| 名称 | |
|---|---|
error |
尝试渲染图表出错时触发。 属性：ID、消息
|
select |
标准选择事件 属性：无
|
数据政策
地图由 Google 地图显示。如需详细了解数据政策，请参阅 Google 地图服务条款。