概览
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 地图服务条款。