Omówienie
Mapa geograficzna to mapa kraju, kontynentu lub regionu z przypisanymi kolorami i wartościami do konkretnych regionów. Wartości są wyświetlane jako skala kolorów, a w regionach możesz określić opcjonalny tekst najedź kursorem. Mapa jest renderowana w przeglądarce za pomocą wbudowanego odtwarzacza Flash. Pamiętaj, że mapy nie można przewijać ani przeciągać, ale można ją powiększać.
Przykłady
Mamy 2 przykłady: jeden ze stylem wyświetlania regionów i jeden ze stylem wyświetlania znaczników.
Przykład regionów
Styl „Regiony” wypełnia całe regiony (zwykle kraje) kolorami odpowiadającymi przypisanym przez Ciebie wartościom. Określ styl regionów, przypisując do niego kod 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” pokazuje okrąg, rozmiar i kolor do wskazywania wartości w określonych 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 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, a także różne typy danych w każdej kolumnie. Wszystkie adresy w tabeli muszą korzystać z jednego lub drugiego. Nie można mieszać typów.
- Format 1. Szerokość i długość geograficzna. Ten format działa tylko wtedy, gdy opcja
dataMode
jest „znacznikami”. Jeśli używasz tego formatu, nie musisz uwzględniać kodu JavaScript Map Google. Lokalizację wpisz w 2 kolumnach oraz 2 opcjonalnych kolumnach:- [Liczba, Wymagane] Szerokość geograficzna. Wartości dodatnie to północ, a południe ujemne.
- [Liczba, Wymagane] Długość geograficzna. Wartości dodatnie to wschód, a ujemne – w kierunku zachodnim.
- [Liczba, Opcjonalnie] Wartość liczbowa wyświetlana po najechaniu przez użytkownika kursorem myszy na ten region. Jeśli używana jest kolumna 4, jest ona wymagana.
- [Ciąg, opcjonalny] Dodatkowy tekst ciągu znaków wyświetlany, gdy użytkownik najedzie kursorem na ten region.
- Format 2: adres, nazwa kraju, lokalizacje regionów lub kody obszarów miejskich USA. Ten format działa z opcją
dataMode
ustawioną na „markers” lub „regions”. Lokalizacja jest wpisana w jednej kolumnie i 2 opcjonalnych kolumnach:- [Ciąg, wymagany] Lokalizacja na mapie. Akceptujemy te formaty:
- Konkretny adres (np. „Rynek Główny 12”.
- Nazwa kraju w formie ciągu znaków (np. „Anglia”) lub kod w formacie ISO-3166 albo jego odpowiednik w języku angielskim (np. „GB” lub „Wielka Brytania”).
- Nazwa regionu z użyciem wielkich liter w normie ISO-3166-2 lub jej 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”.
- Obszar miejski. Są to 3-cyfrowe kody miejskie używane do oznaczania różnych regionów. Obsługiwane są tylko kody amerykańskie. Pamiętaj, że to nie to te same numery, co numery kierunkowe telefonów.
- [Liczba, Opcjonalnie] Wartość liczbowa wyświetlana po najechaniu przez użytkownika kursorem myszy na ten region. Jeśli używana jest kolumna 3, jest ona wymagana.
- [Ciąg, opcjonalny] Dodatkowy tekst ciągu znaków wyświetlany, gdy użytkownik najedzie kursorem na ten region.
- [Ciąg, wymagany] Lokalizacja na mapie. Akceptujemy te formaty:
Uwaga: mapa może zawierać maksymalnie 400 wpisów. Jeśli tabela DataTable lub DataView zawiera więcej niż 400 wierszy, zobaczysz tylko 400. Najszybsze tryby to dataMode='regions'
z lokalizacjami określonymi jako kody ISO oraz dataMode='markers'
o szerokości i długości geograficznej. Tryb najwolniejszy to dataMode='markers'
z adresem ciągu znaków.
Ważne: DataTable
musi zawierać wszystkie opcjonalne kolumny poprzedzające dowolną kolumnę, której chcesz użyć. Jeśli na przykład chcesz określić tabelę i długość geograficzną i chcesz użyć tylko kolumn 1, 2 i 4, DataTable
musi jeszcze zdefiniować kolumnę 3 (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ślna | Opis |
---|---|---|---|
region |
tekst | „świecie” | Obszar do wyświetlenia na mapie. Pojawią się też obszary otaczające. Może to być kod kraju (w dużym formacie ISO 3166) lub jeden z tych ciągów znaków:
Geomapa nie umożliwia przewijania ani przeciągania, a jedynie ograniczone powiększenie. Podstawowe pomniejszenie możesz włączyć, ustawiając właściwość |
dataMode |
tekst | „regiony” | Jak wyświetlać wartości na mapie. Obsługiwane są 2 wartości:
|
width |
tekst | '556px' | Szerokość wizualizacji. Jeśli nie podano żadnej jednostki, domyślną jednostką są piksele. |
height |
tekst | '347px' | Wysokość wizualizacji. Jeśli nie podano żadnej jednostki, domyślną jednostką są piksele. |
colors |
Tablica liczb RGB w formacie 0xRRGGBB | [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] | Gradient koloru, który można przypisać do wartości w wizualizacji. Musisz mieć co najmniej 2 wartości. gradient będzie zawierał wszystkie wartości oraz obliczone wartości pośrednie, których najjaśniejszy kolor ma najmniejszą wartość, a najciemniejszy – najwyższy. |
showLegend |
wartość logiczna | prawda | Jeśli ma wartość true (prawda), wyświetla legendę na mapie. |
showZoomOut |
wartość logiczna | fałsz | Jeśli ma wartość true (prawda), wyświetla przycisk z etykietą określoną przez właściwość zoomOutLabel . Po kliknięciu tego przycisku nic się nie dzieje po kliknięciu, z wyjątkiem wywołania zdarzenia zoomOut .
Aby obsługiwać powiększenie, wychwyć to zdarzenie i zmień opcję region .
Możesz określić właściwość showZoomOut tylko wtedy, gdy opcja region jest mniejsza niż widok świata. Jednym ze sposobów na włączenie funkcji powiększenia jest wykrycie zdarzenia regionClick , zmianę właściwości region na odpowiedni region i ponowne załadowanie mapy. |
zoomOutLabel |
tekst | Pomniejsz | Etykieta przycisku powiększenia. |
Metody
Metoda | Typ zwracanej wartości | Opis |
---|---|---|
draw(data, options) |
Brak | Rysuje mapę. Możliwość powrotu przed zakończeniem rysowania (zobacz zdarzenie drawingDone() ). |
getSelection() |
Tablica elementów wyboru | Standardowa implementacja getSelection() . Wybrane elementy to wiersze. Ta metoda działa tylko wtedy, gdy opcja dataMode to „regiony”. Możesz wybrać tylko region z przypisaną wartością. |
setSelection(selection) |
Brak | Standardowa implementacja setSelection() . Traktuje zaznaczenie jako zaznaczenie wierszy i obsługuje wiele opcji wyboru wiersza. Można wybrać tylko regiony z przypisanymi wartościami. |
Zdarzenia
Nazwa | Opis | Usługi |
---|---|---|
error |
Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd. | id, message, |
select |
Uruchamiane, gdy użytkownik kliknie region z przypisaną wartością. Aby dowiedzieć się, co zostało wybrane, wywołaj metodę Uwaga: z powodu pewnych ograniczeń zdarzenie |
Brak |
regionClick |
Wywoływane po kliknięciu regionu. Działa zarówno dla „regionów”, jak i „znaczników” Uwaga: z powodu pewnych ograniczeń zdarzenie |
Obiekt z jedną właściwością (region ) będący ciągiem w formacie ISO-3166 opisującym region, który został kliknięty. |
zoomOut |
Wywoływane po kliknięciu przycisku pomniejszenia. Aby obsługiwać powiększenie, wychwyć to zdarzenie i zmień opcję Uwaga: z powodu pewnych ograniczeń zdarzenie |
Brak |
drawingDone |
Wywoływana po zakończeniu rysowania. | Brak |
Zasady dotyczące danych
Lokalizacje są geokodowane przez Mapy Google. Dane, które nie wymagają geokodowania, nie są wysyłane na żaden serwer. Aby dowiedzieć się więcej o zasadach dotyczących danych, zapoznaj się z Warunkami korzystania z usługi Mapy Google.
Uwagi
Ze względu na ustawienia zabezpieczeń Flash ta wersja (oraz wszystkie wizualizacje oparte na technologii Flash) może nie działać prawidłowo w przypadku uzyskania dostępu z lokalizacji pliku w przeglądarce (np. file:///c:/webhost/myhost/myviz.html), a nie z adresu URL serwera WWW (np. http://www.myhost.com/myviz.html). Jest to zwykle problem testowy. Możesz rozwiązać ten problem zgodnie z opisem na stronie Macromedia.