Esta página foi traduzida pela API Cloud Translation.

Visualização: geomapa

Visão geral
Exemplos
Carregando
Formato de dados
Opções de configuração
Métodos
Eventos
Política de dados
Notes

Visão geral

Um mapa geográfico é um mapa de um país, continente ou região, com cores e valores atribuídos a regiões específicas. Os valores são exibidos como uma escala de cores, e é possível especificar um texto flutuante opcional para as regiões. O mapa é renderizado no navegador usando um Flash player incorporado. Não é possível rolar nem arrastar o mapa, mas você pode configurá-lo para permitir zoom.

Exemplos

Temos dois exemplos aqui: um que usa o estilo de exibição das regiões e outro que usa o estilo de exibição de marcadores.

Exemplo de regiões

O estilo de regiões preenche regiões inteiras (geralmente países) com cores correspondentes aos valores atribuídos por você. Especifique o estilo das regiões atribuindo options['dataMode'] = 'regions' no código.

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

Exemplo de marcadores

O estilo "marcadores" exibe um círculo dimensionado e colorido para indicar um valor nas regiões especificadas.

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

Carregando

O nome do pacote google.charts.load é "geomap"

  google.charts.load('current', {'packages': ['geomap']});

O nome da classe de visualização do mapa geográfico é google.visualization.GeoMap

  var visualization = new google.visualization.GeoMap(container);

Formato de dados

Dois formatos de endereço são compatíveis, cada um aceita um número diferente de colunas e diferentes tipos de dados para cada coluna. Todos os endereços da tabela precisam usar um dos dois. Não é possível misturar tipos.

Formato 1: locais de latitude/longitude. Esse formato só funciona quando a opção dataMode é "marcadores". Se esse formato for usado, você não precisará incluir o JavaScript do Google Maps. O local é inserido em duas colunas, mais duas colunas opcionais:
1. [Número, obrigatório] Indica uma latitude. Os números positivos são o norte, os negativos são o sul.
2. [Número, obrigatório] É uma longitude. Os números positivos estão no leste, e os negativos estão no oeste.
3. [Número, opcional] Um valor numérico que é exibido quando o usuário passa o cursor sobre essa região. Se a coluna 4 for usada, essa coluna será obrigatória.
4. [String, opcional] Texto de string adicional exibido quando o usuário passa o cursor sobre essa região.
Formato 2: endereço, nome do país, locais do nome da região ou códigos de área metropolitana dos EUA. Esse formato funciona com a opção dataMode definida como "marcadores" ou "regiões". O local é inserido em uma coluna e mais duas colunas opcionais:
1. [String, required] Um local no mapa. Os seguintes formatos são aceitos:
  - Um endereço específico (por exemplo, "1600 Pennsylvania Ave").
  - Um nome de país como uma string (por exemplo, "Inglaterra"), um código ISO-3166 em maiúsculas ou o equivalente em inglês (por exemplo, "GB" ou "Reino Unido").
  - Um nome de código da região ISO-3166-2 em letra maiúscula ou o equivalente em texto em inglês (por exemplo, "US-NJ" ou "Nova Jersey"). Observação: as regiões só podem ser especificadas quando a opção dataMode está definida como "regions".
  - Um código de área metropolitana. São códigos de área metropolitana de três dígitos usados para designar várias regiões. Somente códigos dos EUA são aceitos. Esses códigos não são iguais aos códigos de área telefônicos.
2. [Número, opcional] Um valor numérico que é exibido quando o usuário passa o cursor sobre essa região. Se a coluna 3 for usada, essa coluna será obrigatória.
3. [String, opcional] Texto de string adicional exibido quando o usuário passa o cursor sobre essa região.

Observação:um mapa pode exibir no máximo 400 entradas. Se o DataTable ou o DataView tiver mais de 400 linhas, apenas as primeiras 400 serão mostradas. Os modos mais rápidos são dataMode='regions' com locais especificados como códigos ISO e dataMode='markers' com entidades de latitude/longitude. O modo mais lento é dataMode='markers' com um endereço de string.

Importante:o DataTable precisa incluir todas as colunas opcionais anteriores às que você quer usar. Por exemplo, se você quiser especificar uma tabela de latitude/longitude e só quiser usar as colunas 1, 2 e 4, seu DataTable ainda precisará definir a coluna 3, embora você não precise adicionar nenhum valor a ela:

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

Opções de configuração

Nome	Tipo	Padrão	Descrição
`region`	string	"mundo"	A área a ser exibida no mapa. As áreas ao redor também serão exibidas. Pode ser o código do país (em formato ISO-3166 maiúsculo) ou uma das seguintes strings: `world` – (mundo inteiro) `us_metro` - (Estados Unidos, áreas metropolitanas) `005` – (América do Sul) `013` – (América Central) `021`: (América do Norte) `002` – (toda a África) `017` – (África Central) `015` – (Norte da África) `018` - (Sul da África) `030` - (Ásia Oriental) `034` – (Sul da Ásia) `035` - (região da Ásia/Pacífico) `009` – (Oceania) `145` – (Oriente Médio) `143` – (Ásia Central) `151` – (Norte da Ásia) `154`: (Norte da Europa) `155` - (Europa Ocidental) `039` – (Sul da Europa) O mapa geográfico não permite o comportamento de rolagem ou arrastar, apenas o comportamento de zoom limitado. Uma redução básica de zoom pode ser ativada definindo a propriedade `showZoomOut`.
`dataMode`	string	"regions"	Como mostrar valores no mapa. Dois valores são aceitos: `regions`: colore uma região inteira com a cor apropriada. Essa opção não pode ser usada com endereços de latitude/longitude. Consulte Exemplo de regiões. `markers`: mostra um ponto sobre uma região, com a cor e o tamanho indicando o valor. Consulte o exemplo de marcadores.
`width`	string	"556 px"	Largura da visualização. Se nenhuma unidade for informada, a unidade padrão será pixels.
`height`	string	"347 px"	Altura da visualização. Se nenhuma unidade for informada, a unidade padrão será pixels.
`colors`	Matriz de números RGB no formato 0xRRGGBB	[0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]	Gradiente de cores para atribuir a valores na visualização. É preciso ter pelo menos dois valores. O gradiente incluirá todos os seus valores, além dos valores intermediários calculados, com a cor mais clara como o menor valor e a cor mais escura como a mais alta.
`showLegend`	boolean	verdadeiro	Se verdadeiro, exibe uma legenda para o mapa.
`showZoomOut`	boolean	false	Se verdadeiro, exibe um botão com o rótulo especificado pela propriedade `zoomOutLabel`. Esse botão não faz nada quando clicado, exceto gerar o evento `zoomOut`. Para processar o zoom, capture esse evento e altere a opção `region`. Só será possível especificar `showZoomOut` se a opção `region` for menor que a visualização do mundo. Uma maneira de ativar o comportamento do zoom é detectar o evento `regionClick`, mudar a propriedade `region` para a região apropriada e recarregar o mapa.
`zoomOutLabel`	string	"Diminuir zoom"	Marcador do botão de zoom.

Métodos

Método	Tipo de retorno	Descrição
`draw(data, options)`	Nenhum	Desenha o mapa. Pode retornar antes da conclusão do desenho (consulte o evento `drawingDone()`).
`getSelection()`	Matriz de elementos de seleção	Implementação padrão do `getSelection()`. Os elementos selecionados são linhas. Esse método só funciona quando a opção `dataMode` é "regions". Só é possível selecionar uma região com um valor atribuído.
`setSelection(selection)`	Nenhum	Implementação padrão de `setSelection()`. Trata uma seleção como uma seleção de linha e oferece suporte a várias seleções de linha. Somente regiões com valores atribuídos podem ser selecionadas.

Eventos

Nome	Descrição	Propriedades
`error`	Disparado quando ocorre um erro ao tentar renderizar o gráfico.	ID, mensagem
`select`	Disparado quando o usuário clica em uma região com um valor atribuído. Para saber o que foi selecionado, chame `getSelection()`. Disponível apenas quando a opção `dataMode` está definida como "regiões". Observação: devido a determinadas limitações, o evento `select` não será gerado se você estiver acessando a página no navegador como um arquivo (por exemplo, "file://") e não de um servidor (por exemplo, "http://www").	Nenhum
`regionClick`	Chamado quando uma região é clicada. Funciona para "regiões" e "marcadores" `dataMode`. No entanto, no modo de marcador, isso não será gerado para o país específico atribuído na opção "região" (se um país específico estiver listado). Observação: devido a determinadas limitações, o evento `regionClick` não será gerado se você estiver acessando a página no navegador como um arquivo (por exemplo, "file://") e não de um servidor (por exemplo, "http://www").	Um objeto com uma única propriedade, `region`, que é uma string no formato ISO-3166 que descreve a região clicada.
`zoomOut`	Chamado quando o botão de diminuir o zoom é clicado. Para processar o zoom, capture esse evento e altere a opção `region`. Observação: devido a determinadas limitações, o evento `zoomOut` não será gerado se você estiver acessando a página no navegador como um arquivo (por exemplo, "file://") e não de um servidor (por exemplo, "http://www").	Nenhum
`drawingDone`	Chamado quando o geomap termina o desenho.	Nenhum

Política de dados

Os locais são geocodificados pelo Google Maps. Dados que não exigem geocodificação não são enviados a nenhum servidor. Consulte os Termos de Serviço do Google Maps para mais informações sobre a política de dados deles.

Observações:

Devido às configurações de segurança do Flash, essa e todas as visualizações baseadas em Flash podem não funcionar corretamente quando acessadas de um local de arquivo no navegador (por exemplo, file:///c:/webhost/myhost/myviz.html), em vez de um URL do servidor da Web (por exemplo, http://www.myhost.com/myviz.html). Normalmente, isso é apenas um problema de teste. É possível resolver esse problema conforme descrito no site da Macromedia.