可视化:地图

概览

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
<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
<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
<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
<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);

数据格式

支持两种备选数据格式:

  1. 经纬度对 - 前两列应分别为数字的纬度和经度。可选的第三列包含一个字符串,用于描述前两列中指定的位置。
  2. 字符串地址 - 第一列应为包含地址的字符串。此地址应尽可能完整。可选的第二列包含一个字符串,用于描述第一列中的位置。字符串地址的加载速度较慢,尤其是当您的地址超过 10 个时。

注意:纬度/经度对选项加载地图的速度要快得多,尤其是在处理大型数据时。对于大型数据集,我们建议您使用此选项。请访问 Google Maps API,了解如何将您的地址转换为经纬度点。地图最多可显示 400 个条目;如果您的数据超过 400 行,则将只显示前 400 行。

配置选项

名称
enableScrollWheel

如果设置为 true,则允许使用鼠标滚轮缩放。

类型:布尔值
默认:false
图标

存放多组自定义标记。每个标记集都可以指定 normalselected 标记图像。可以通过设置 default 选项来设置默认标记,也可以通过设置唯一标记 ID 来自定义标记集。

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>

包含自定义地图类型属性的对象。该自定义地图类型将由您为自定义地图类型指定的 mapTypeId 访问。必须为创建的每个自定义地图类型指定新的 mapTypeId。每种自定义地图类型都应包含两个属性:

  • name:样式化地图类型的显示名称
  • style:一个数组,其中包含样式化地图类型的样式对象
Type:对象
默认:null
maps.<mapTypeId>.name

useMapTypeControl 设置为 true 时,将在地图控件中显示的地图的名称。

类型:字符串
默认:null
maps.<mapTypeId>.styles

存放自定义地图类型各元素的样式对象。

每个样式对象都可以包含 1-3 个属性:featureTypeelementTypestylers。如果省略 featureTypeelementType,样式将应用于所有地图项/元素。

{
  featureType: 'roadway.highway',
  elementType: 'labels.text.fill',
  stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}

如需详细了解不同的地图项、元素和样式器,请参阅 Google 地图文档。

类型:数组
默认:null
mapType

要显示的地图类型。可能的值有“normal”“地形”“卫星”“hybrid”或自定义地图类型的 ID(如果已创建)。

类型:字符串
默认:“混合”
mapTypeId

如果使用地图类型控件 (useMapTypeControl: true),则此数组中指定的 ID 将成为地图类型控件中显示的唯一地图类型。如果未设置此选项,则地图类型控件将默认为标准 Google 地图类型控件选项,以及任何可用的自定义地图类型。

类型:数组
默认:null
显示信息窗口

如果设置为 true,则在用户选择点标记后,在单独的窗口中显示位置说明。此选项以前称为 showTip,直到版本 45 为止。另请参阅 showTooltip

类型:布尔值
默认:false
ShowLine

如果设置为 true,则通过所有点显示 Google 地图多段线

类型:布尔值
默认:false
显示工具提示

如果设置为 true,则在将鼠标放在点标记上方时,系统会显示位置说明作为提示。此选项以前称为 showTip,直到版本 45 为止。请注意,目前不支持 HTML,因此提示会显示原始 HTML 标记。

类型:布尔值
默认:false
使用 MapTypeControl

显示地图类型选择器,让查看者可以在 [地图、卫星、混合、地形] 之间切换。当 useMapTypeControl 为 false(默认)时,不会显示选择器,并且类型由 mapType 选项决定。

类型:布尔值
默认:false
zoomLevel

表示地图初始缩放级别的整数,其中 0 表示完全缩小(整个世界),19 表示最大缩放级别。 (请参阅 Google Maps API 中的“缩放级别”。)

类型:数字
默认:自动

方法

方法
draw(data, options)

绘制地图。

返回值类型:无
getSelection()

标准 getSelection() 实现。选择元素都是行元素。 可以返回多个选定的行。

返回值类型:一组选择元素
setSelection(selection)

标准 setSelection() 实现。将每个选择条目视为行选择。支持选择多行。

返回值类型:无

事件

名称
error

尝试渲染图表出错时触发。

属性:ID、消息
select

标准选择事件

属性:无

数据政策

地图由 Google 地图显示。如需详细了解数据政策,请参阅 Google 地图服务条款