可视化：地图

  1. 概览
  2. 已命名的地理位置
  3. 经过地理编码的地理位置
  4. 自定义标记
  5. 添加多个标记集
  6. 设置地图样式
  7. 正在加载
  8. 数据格式
  9. 配置选项
  10. 方法
  11. 活动
  12. 数据政策

概览

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
图标

存放多组自定义标记。每个标记集都可以指定 normal 和 selected 标记图像。可以通过设置 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 个属性：featureType、elementType 和 stylers。如果省略 featureType 和 elementType，样式将应用于所有地图项/元素。 

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