Ta strona została przetłumaczona przez Cloud Translation API.

Wizualizacja: geomapa

Overview
Przykłady
Wczytuję
Format danych
Opcje konfiguracji
Metody
Zdarzenia
Zasady dotyczące danych
Notes

Omówienie

Geomapa to mapa kraju, kontynentu lub regionu z kolorami i wartościami przypisanymi do konkretnych regionów. Wartości są wyświetlane jako skala kolorów. Możesz też określić opcjonalny tekst wyświetlany po najechaniu kursorem dla poszczególnych regionów. Mapa jest renderowana w przeglądarce za pomocą osadzonego odtwarzacza Flash. Pamiętaj, że mapy nie można przewijać ani przeciągać, ale można ją skonfigurować tak, by umożliwić jej powiększanie.

Przykłady

Podajemy 2 przykłady: jeden wykorzystujący styl wyświetlania regionów i drugi wykorzystujący styl wyświetlania znaczników.

Przykład regionów

Styl regionów wypełnia całe regiony (zwykle kraje) kolorami odpowiadającymi przypisanym przez Ciebie wartościom. Określ styl regionów, przypisując w kodzie atrybut 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>

Przykład znaczników

Styl „Znaczniki” wyświetla okrąg, odpowiedni rozmiar i kolor, aby wskazać wartość w określonych przez Ciebie regionach.

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

Wczytuję

Nazwa pakietu google.charts.load to "geomap"

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

Nazwa klasy wizualizacji mapy geograficznej to google.visualization.GeoMap

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

Format danych

Obsługiwane są 2 formaty adresów, z których każdy obsługuje inną liczbę kolumn i inne typy danych w każdej kolumnie. Wszystkie adresy w tabeli muszą używać jednego lub drugiego. Nie można mieszać typów.

Format 1: lokalizacje szerokości/długości geograficznej. Ten format działa tylko wtedy, gdy opcja dataMode to „markery”. Jeśli używasz tego formatu, nie musisz dodawać kodu JavaScript Map Google. Lokalizacja jest wpisana w 2 kolumnach i 2 opcjonalnych kolumnach:
1. [Liczba, wymagana] Szerokość geograficzna. Liczby dodatnie oznaczają północ, a ujemne – południe.
2. [Liczba, wymagana] długość geograficzna. Liczby dodatnie oznaczają wschód, a ujemne – zachód.
3. [Liczba, opcjonalnie] Wartość liczbowa wyświetlana, gdy użytkownik najedzie kursorem na ten region. Jeśli używana jest kolumna 4, jest ona wymagana.
4. [Ciąg znaków, opcjonalny] Dodatkowy tekst ciągu wyświetlany, gdy użytkownik najedzie kursorem na ten region.
Format 2: adres, nazwa kraju, lokalizacje w nazwach regionów lub obszary miejskie w Stanach Zjednoczonych. Ten format działa, gdy opcja dataMode ma wartość „markery” lub „regiony”. Lokalizacja jest wpisana w jednej kolumnie i 2 opcjonalnych kolumnach:
1. [Ciąg, wymagany] lokalizacja na mapie. Akceptowane są te formaty:
  - Konkretny adres (na przykład „1600 Pennsylvania Ave”).
  - Nazwa kraju jako ciąg znaków (np. „Anglia”), kod ISO-3166 pisany wielkimi literami lub jego odpowiedni tekst w języku angielskim (np. „GB” lub „Polska”).
  - Nazwa kodowa regionu pisana wielkimi literami w formacie ISO-3166-2 lub jego odpowiednik w języku angielskim (np. „US-NJ” lub „New Jersey”). Uwaga: regiony można określić tylko wtedy, gdy opcja dataMode jest ustawiona na „regions”.
  - miejski numer kierunkowy. Są to 3-cyfrowe kody obszarów miejskich używane do wyznaczania różnych regionów. Obsługiwane są tylko kody w Stanach Zjednoczonych. Pamiętaj, że to nie to samo co telefoniczne numery kierunkowe.
2. [Liczba, opcjonalnie] Wartość liczbowa wyświetlana, gdy użytkownik najedzie kursorem na ten region. Jeśli używana jest kolumna 3, jest ona wymagana.
3. [Ciąg znaków, opcjonalny] Dodatkowy tekst ciągu wyświetlany, gdy użytkownik najedzie kursorem na ten region.

Uwaga: mapa może wyświetlać maksymalnie 400 pozycji. Jeśli DataTable lub DataView zawiera więcej niż 400 wierszy, wyświetli się tylko pierwsze 400 pozycji. Najszybsze tryby to dataMode='regions' z lokalizacjami określonymi jako kody ISO i dataMode='markers' z uwzględnieniem szerokości i długości geograficznej. Najwolniejszy tryb to dataMode='markers' z adresem w postaci ciągu znaków.

Ważne: DataTable musi zawierać każdą opcjonalną kolumnę poprzedzającą dowolną kolumnę, której chcesz użyć. Jeśli na przykład chcesz podać tabelę szerokości i długości geograficznej i chcesz użyć tylko kolumn 1, 2 i 4, funkcja DataTable musi nadal definiować kolumnę 3 (chociaż nie musisz dodawać do niej żadnych wartości):

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

Opcje konfiguracji

Nazwa	Typ	Domyślne	Opis
`region`	string,	„world”	Obszar do wyświetlenia na mapie. (Wyświetlą się też otoczenie). Może to być kod kraju (w formacie ISO-3166 pisany wielkimi literami) lub jeden z tych ciągów: `world` – (cały świat) `us_metro` – (Stany Zjednoczone, obszary miejskie) `005` – (Ameryka Południowa) `013` – (Ameryka Środkowa) `021` – (Ameryka Północna) `002` – (cała Afryka) `017` – (Afryka Środkowa) `015` – (Afryka Północna) `018` – (Republika Południowej Afryki) `030` – (Azja Wschodnia) `034` – (Azja Południowa) `035` – (Azja i Pacyfik) `009` – (Oceania) `145` – (Bliski Wschód) `143` – (Azja Środkowa) `151` – (Azja Północna) `154` – (Europa Północna) `155` – (Europa Zachodnia) `039` – (Europa Południowa) Geomapa nie umożliwia przewijania ani przeciągania, a jedynie ograniczone powiększanie. Podstawowe pomniejszanie można włączyć, ustawiając właściwość `showZoomOut`.
`dataMode`	string,	„regiony”	Jak wyświetlać wartości na mapie. Obsługiwane są 2 wartości: `regions` – koloruje cały obszar odpowiednim kolorem. Tej opcji nie można używać w przypadku adresów zawierających szerokość i długość geograficzną. Zobacz przykład regionów. `markers` – wyświetla kropkę nad regionem, a kolor i rozmiar wskazują wartość. Zobacz Przykład znaczników.
`width`	string,	„556 piks.”	Szerokość wizualizacji. Jeśli nie podasz żadnych jednostek, domyślną jednostką będą piksele.
`height`	string,	„347 piks.”	Wysokość wizualizacji. Jeśli nie podasz żadnych jednostek, domyślną jednostką będą piksele.
`colors`	Tablica numerów RGB w formacie 0xRRGGBB	[0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]	Gradient koloru do przypisania do wartości na wizualizacji. Musisz mieć co najmniej 2 wartości. Gradient będzie zawierał wszystkie wartości, a także obliczone wartości pośrednie, przy czym najjaśniejszy kolor ma wartość najmniejszą, a najciemniejszy – najwyższy.
`showLegend`	boolean	prawda	Jeśli ma wartość true, wyświetl legendę mapy.
`showZoomOut`	boolean	false	Jeśli ma wartość true (prawda), wyświetl przycisk z etykietą określoną przez właściwość `zoomOutLabel`. Pamiętaj, że kliknięcie tego przycisku nie ma nic wspólnego z wyjątkiem wywołania zdarzenia `zoomOut`. Aby obsługiwać powiększanie, przechwyć to zdarzenie i zmień opcję `region`. `showZoomOut` możesz określić tylko wtedy, gdy opcja `region` jest mniejsza niż widok świata. Jednym ze sposobów na włączenie powiększenia jest nasłuchiwanie zdarzenia `regionClick`, zmiana właściwości `region` na odpowiedni region i wczytanie mapy ponownie.
`zoomOutLabel`	string,	Pomniejsz	Etykieta przycisku powiększenia.

Metody

Metoda	Typ zwracanej wartości	Opis
`draw(data, options)`	Brak	Rysuje mapę. Można powrócić przed zakończeniem rysowania (patrz zdarzenie `drawingDone()`).
`getSelection()`	Tablica elementów zaznaczenia	Standardowa implementacja `getSelection()`. Wybrane elementy to wiersze. Ta metoda działa tylko wtedy, gdy opcja `dataMode` ma wartość „regiony”. Możesz wybrać tylko region z przypisaną wartością.
`setSelection(selection)`	Brak	Implementacja standardowa `setSelection()`. Traktuje zaznaczenie jako wybór wiersza i obsługuje wybór wielu wierszy. Można wybierać tylko regiony z przypisanymi wartościami.

Zdarzenia

Nazwa	Opis	Właściwości
`error`	Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd.	identyfikator, wiadomość
`select`	Uruchamiane, gdy użytkownik kliknie region z przypisaną wartością. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer `getSelection()`. Ta opcja jest dostępna tylko wtedy, gdy opcja `dataMode` jest ustawiona na „regiony”. Uwaga: ze względu na pewne ograniczenia zdarzenie `select` nie jest wywoływane, gdy otwierasz stronę w przeglądarce jako plik (np. „file://”), a nie z serwera (np. "http://www").	Brak
`regionClick`	Wywoływane po kliknięciu regionu. Działa zarówno w przypadku „regionów”, jak i „znaczników” `dataMode`. Jednak w trybie znacznika ta prośba nie zostanie przesłana dla konkretnego kraju przypisanego w opcji „region” (jeśli na liście znajduje się konkretny kraj). Uwaga: ze względu na pewne ograniczenia zdarzenie `regionClick` nie jest wywoływane, gdy otwierasz w przeglądarce stronę jako plik (np. „file://”), a nie z serwera (np. "http://www").	Obiekt z pojedynczą właściwością (`region`) będącym ciągiem znaków w formacie ISO-3166 opisującym kliknięty region.
`zoomOut`	Wywoływane po kliknięciu przycisku pomniejszania. Aby obsługiwać powiększanie, przechwyć to zdarzenie i zmień opcję `region`. Uwaga: ze względu na pewne ograniczenia zdarzenie `zoomOut` nie jest wywoływane, gdy otwierasz stronę w przeglądarce jako plik (np. „file://”), a nie z serwera (np. "http://www").	Brak
`drawingDone`	Wywoływane po zakończeniu rysowania mapy geograficznej.	Brak

Zasady dotyczące danych

Lokalizacje są geokodowane przez Mapy Google. Dane, które nie wymagają geokodowania, nie są wysyłane na żaden serwer. Więcej informacji o zasadach dotyczących danych znajdziesz w Warunkach korzystania z Map Google.

Uwagi

Ze względu na ustawienia zabezpieczeń Flash ten element (podobnie jak wszystkie wizualizacje oparte na Flashu) może nie działać prawidłowo, gdy zostanie otwarty z lokalizacji pliku w przeglądarce (np. file:///c:/webhost/myhost/myviz.html), a nie z adresu URL serwera WWW (np. http://www.mojhost.com/myviz.html). Zazwyczaj jest to tylko problem testowy. Możesz rozwiązać ten problem w sposób opisany w witrynie Macromedia.