Эта страница переведена с помощью Cloud Translation API.

Визуализация: Геокарта

Обзор
Примеры
Загрузка
Формат данных
Параметры конфигурации
Методы
События
Политика данных
Примечания

Обзор

Геокарта — это карта страны, континента или региона с цветами и значениями, присвоенными конкретным регионам. Значения отображаются в виде цветовой шкалы, и вы можете указать дополнительный наводящий текст для регионов. Карта отображается в браузере с помощью встроенного 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 установлено значение «маркеры». Если используется этот формат, вам не нужно включать Javascript Google Map. Местоположение указывается в двух столбцах, а также в двух дополнительных столбцах:
1. [ Обязательный номер ] Широта. Положительные числа — север, отрицательные — юг.
2. [ Обязательный номер ] Долгота. Положительные числа — восток, отрицательные — запад.
3. [ Число, необязательно ] Числовое значение, отображаемое при наведении курсора мыши на эту область. Если используется столбец 4, этот столбец является обязательным.
4. [ Строка, необязательно ] Дополнительный строковый текст, отображаемый при наведении курсора мыши на эту область.
Формат 2: адрес, название страны, названия регионов или коды городов США. Этот формат работает с параметром dataMode , установленным на «маркеры» или «регионы». Местоположение указывается в одном столбце плюс два дополнительных столбца:
1. [ Строка, обязательная ] Местоположение на карте. Принимаются следующие форматы:
  - Конкретный адрес (например, «1600 Pennsylvania Ave»).
  - Название страны в виде строки (например, «Англия») или код ISO-3166 в верхнем регистре или его английский текстовый эквивалент (например, «GB» или «Соединенное Королевство»).
  - Кодовое имя региона ISO-3166-2 в верхнем регистре или его английский текстовый эквивалент (например, «US-NJ» или «New Jersey»). Примечание . Регионы можно указать только в том случае, если для параметра dataMode установлено значение «регионы».
  - Код города . Это трехзначные коды метро, используемые для обозначения различных регионов; Поддерживаются только коды США. Обратите внимание, что это не то же самое, что телефонные коды городов.
2. [ Число, необязательно ] Числовое значение, отображаемое при наведении курсора мыши на эту область. Если используется столбец 3, этот столбец является обязательным.
3. [ Строка, необязательно ] Дополнительный строковый текст, отображаемый при наведении курсора мыши на эту область.

Примечание. На карте может отображаться максимум 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`	нить	'мир'	Область для отображения на карте. (Окружающие области также будут отображаться.) Это может быть либо код страны (в верхнем регистре в формате ISO-3166 ), либо одна из следующих строк: `world` - (Весь мир) `us_metro` - (США, районы метро) `005` - (Южная Америка) `013` - (Центральная Америка) `021` - (Северная Америка) `002` - (Вся Африка) `017` - (Центральная Африка) `015` - (Северная Африка) `018` - (Южная Африка) `030` - (Восточная Азия) `034` - (Южная Азия) `035` - (Азиатско-Тихоокеанский регион) `009` - (Океания) `145` - (Ближний Восток) `143` - (Средняя Азия) `151` - (Северная Азия) `154` - (Северная Европа) `155` - (Западная Европа) `039` - (Южная Европа) Geomap не поддерживает прокрутку или перетаскивание, а только ограниченное масштабирование. Базовое уменьшение масштаба можно включить, установив свойство `showZoomOut` .
`dataMode`	нить	'регионы'	Как отображать значения на карте. Поддерживаются два значения: `regions` — окрашивает весь регион соответствующим цветом. Эту опцию нельзя использовать с адресами широты и долготы. См. Пример регионов . `markers` — отображает точку над областью, цвет и размер которой указывают значение. См. Пример маркеров .
`width`	нить	'556 пикселей'	Ширина визуализации. Если единицы измерения не указаны, единицей по умолчанию являются пиксели.
`height`	нить	'347 пикселей'	Высота визуализации. Если единицы измерения не указаны, единицей по умолчанию являются пиксели.
`colors`	Массив чисел RGB в формате 0xRRGGBB	[0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]	Цветовой градиент для присвоения значениям в визуализации. У вас должно быть как минимум два значения; градиент будет включать в себя все ваши значения, а также вычисленные промежуточные значения, при этом самый светлый цвет будет наименьшим значением, а самый темный цвет — самым высоким.
`showLegend`	логическое значение	истинный	Если это правда, отобразите легенду для карты.
`showZoomOut`	логическое значение	ЛОЖЬ	Если это правда, отобразите кнопку с меткой, указанной свойством `zoomOutLabel` . Обратите внимание, что при нажатии эта кнопка ничего не делает , кроме создания события `zoomOut` . Чтобы справиться с масштабированием, перехватите это событие и измените параметр `region` . Вы можете указать `showZoomOut` только в том случае, если параметр `region` меньше, чем вид мира. Одним из способов включения масштабирования может быть прослушивание события `regionClick` , изменение свойства `region` на соответствующий регион и перезагрузка карты.
`zoomOutLabel`	нить	'Уменьшить'	Метка для кнопки масштабирования.

Методы

Метод	Тип возврата	Описание
`draw(data, options)`	Никто	Рисует карту. Может вернуться до завершения рисования (см. событие `drawingDone()` ).
`getSelection()`	Массив элементов выбора	Стандартная реализация `getSelection()` . Выбранные элементы представляют собой строки. Этот метод работает только в том случае, если параметр `dataMode` имеет значение «регионы». Вы можете выбрать только регион с присвоенным значением.
`setSelection( selection )`	Никто	Стандартная реализация `setSelection()` . Рассматривает выбор как выбор строки и поддерживает выбор нескольких строк. Можно выбрать только регионы с присвоенными значениями.

События

Имя	Описание	Характеристики
`error`	Вызывается, когда возникает ошибка при попытке отобразить диаграмму.	идентификатор, сообщение
`select`	Запускается, когда пользователь щелкает область с присвоенным значением. Чтобы узнать, что было выбрано, вызовите `getSelection()` . Доступно только в том случае, если для параметра `dataMode` установлено значение «регионы». Примечание . Из-за определенных ограничений событие `select` не генерируется, если вы обращаетесь к странице в браузере как к файлу (например, «file://»), а не с сервера (например, «http://www»). ).	Никто
`regionClick`	Вызывается при щелчке по региону. Работает как для «регионов», так и для «маркеров» `dataMode` . Однако в режиме маркера это не будет выдаваться для конкретной страны, назначенной в опции «регион» (если конкретная страна была указана). Примечание . Из-за определенных ограничений событие `regionClick` не генерируется, если вы обращаетесь к странице в браузере как к файлу (например, «file://»), а не с сервера (например, «http://www»). ).	Объект с единственным свойством `region` , представляющим собой строку в формате ISO-3166, описывающую выбранную область.
`zoomOut`	Вызывается при нажатии кнопки уменьшения масштаба. Чтобы справиться с масштабированием, перехватите это событие и измените параметр `region` . Примечание . Из-за определенных ограничений событие `zoomOut` не генерируется, если вы обращаетесь к странице в браузере как к файлу (например, «file://»), а не с сервера (например, «http://www» ).	Никто
`drawingDone`	Вызывается, когда геокарта завершена.	Никто

Политика данных

Местоположение геокодируется с помощью Google Maps. Любые данные, не требующие геокодирования, не отправляются ни на один сервер. Дополнительную информацию об их политике в отношении данных см. в Условиях использования Карт Google .

Примечания

Из-за настроек безопасности Flash это (и все визуализации на основе Flash) может работать неправильно при доступе из местоположения файла в браузере (например, file:///c:/webhost/myhost/myviz.html), а не из URL-адрес веб-сервера (например, http://www.myhost.com/myviz.html). Обычно это проблема только тестирования. Эту проблему можно решить, как описано на веб-сайте Macromedia .