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

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

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

Обзор

Геокарта — это карта страны, континента или региона с цветами и значениями, присвоенными определенным регионам. Значения отображаются в виде цветовой шкалы, и вы можете указать дополнительный текст для областей. Карта отображается в браузере с помощью встроенного Flash-плеера. Обратите внимание, что карту нельзя прокручивать или перетаскивать, но ее можно настроить для разрешения масштабирования.

Примеры

У нас есть два примера: в одном используется стиль отображения регионов , а в другом — стиль отображения маркеров .

Пример регионов

Стиль регионов заполняет целые регионы (обычно страны) цветами, соответствующими назначенным вами значениям. Укажите стиль регионов, назначив options['dataMode'] = 'regions' в своем коде.

<span class="notranslate"><input type='submit' value="Кодируйте сами на JSFiddle" class='button'/><input type='hidden' name='title' value='Geo Map Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="regions_div" style="width: 900px; height: 500px;"></div> 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); };<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Map Chart.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span>

<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» или «United Kingdom»).
  - Кодовое название региона 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`	логический	истинный	Если true, отобразить легенду для карты.
`showZoomOut`	логический	ЛОЖЬ	Если true, отобразить кнопку с меткой, заданной свойством `zoomOutLabel` . Обратите внимание, что при нажатии на эту кнопку ничего не происходит , кроме создания события `zoomOut` . Чтобы обрабатывать масштабирование, перехватите это событие и измените параметр `region` . Вы можете указать `showZoomOut` , только если параметр `region` меньше, чем мировоззрение. Одним из способов включения поведения масштабирования может быть прослушивание события `regionClick` , изменение свойства `region` на соответствующий регион и перезагрузка карты.
`zoomOutLabel`	нить	'Уменьшить'	Метка для кнопки масштабирования.

Методы

Метод	Тип возврата	Описание
`draw(data, options)`	Никто	Рисует карту. Может вернуться до завершения рисования (см `drawingDone()` ).
`getSelection()`	Массив элементов выбора	Стандартная `getSelection()` . Выбранные элементы являются строками. Этот метод работает, только если для параметра `dataMode` установлено значение «regions». Вы можете выбрать только регион с присвоенным значением.
`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 Maps для получения дополнительной информации об их политике в отношении данных.

Заметки

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