Übersicht
Eine Landkarte ist die Karte eines Landes, eines Kontinents oder einer Regionskarte. Farben und Werte sind bestimmten Regionen zugewiesen. Die Werte werden als Farbskala angezeigt. Sie können optional den Hovertext für Regionen angeben. Die Karte wird im Browser mit einem eingebetteten Flash-Player gerendert. Die Karte lässt sich nicht durch Scrollen oder Ziehen steuern, sondern kann so konfiguriert werden, dass Zoomen möglich ist.
Beispiele
Wir haben hier zwei Beispiele: In dem einen wird der Darstellungsstil für Regionen und im anderen der Stil für Markierungen verwendet.
Beispiel für Regionen
Der Stil „Regionen“ füllt ganze Regionen (in der Regel Länder) mit Farben, die den von Ihnen zugewiesenen Werten entsprechen. Geben Sie den Stil der Regionen an, indem Sie im Code options['dataMode']
= 'regions'
zuweisen.
<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>
Beispiel für Markierungen
Im Stil „Markierungen“ wird ein Kreis in den angegebenen Größen und Farben angezeigt, der sich über die von Ihnen angegebenen Regionen erstreckt.
<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>
Wird geladen
Der Paketname von google.charts.load
lautet "geomap"
google.charts.load('current', {'packages': ['geomap']});
Der Name der Visualisierungsklasse für Landkarten lautet google.visualization.GeoMap
var visualization = new google.visualization.GeoMap(container);
Datenformat
Es werden zwei Adressformate unterstützt, von denen jedes eine unterschiedliche Anzahl von Spalten und unterschiedliche Datentypen für jede Spalte unterstützt. Alle Adressen in der Tabelle müssen eine der beiden Optionen enthalten. Typen können nicht kombiniert werden.
- Format 1: Längen- und Breitengrade Dieses Format funktioniert nur, wenn die Option
dataMode
„markers“ ist. Bei diesem Format muss das Google Maps-JavaScript nicht eingefügt werden. Der Standort wird in zwei Spalten und zwei optionalen Spalten eingegeben:- [Zahl, erforderlich] Ein Breitengrad. Positive Zahlen sind Norden, negative Zahlen nach Süden.
- [Zahl, erforderlich] Ein Längengrad Positive Zahlen sind Osten, negative Zahlen nach Westen.
- [Zahl, optional] Ein numerischer Wert, der angezeigt wird, wenn der Nutzer den Mauszeiger auf diese Region bewegt. Wenn Spalte 4 verwendet wird, ist diese Spalte erforderlich.
- [String, optional] Zusätzlicher Stringtext, der angezeigt wird, wenn der Nutzer den Mauszeiger auf diese Region bewegt.
- Format 2: Adresse, Ländername, Regionsname oder US-Großraumcode. Für dieses Format ist die Option
dataMode
entweder auf „Markierungen“ oder auf „Regionen“ festgelegt. Der Standort wird in eine Spalte sowie zwei optionale Spalten eingegeben:- [String, required] Ein Standort auf der Karte. Folgende Formate sind zulässig:
- Eine bestimmte Adresse, z. B. „Musterstraße 16“
- Ein Ländername als String (z. B. „England“) oder ein großgeschriebener ISO-3166-Code oder der zugehörige englische Text (z. B. „GB“ oder „Vereinigtes Königreich“).
- Ein ISO 3166-2-Regionscode oder ein englischer Textäquivalent in Großbuchstaben, z. B. „US-NJ“ oder „New Jersey“. Hinweis: Regionen können nur angegeben werden, wenn für die dataMode-Option „regionen“ festgelegt ist.
- Eine Städtevorwahl. Dies sind dreistellige Großraumcodes, die verwendet werden können, um verschiedene Regionen anzugeben; US-Codes werden nur unterstützt. Beachten Sie, dass diese nicht mit Telefonvorwahlen identisch sind.
- [Zahl, optional] Ein numerischer Wert, der angezeigt wird, wenn der Nutzer den Mauszeiger auf diese Region bewegt. Wenn Spalte 3 verwendet wird, ist diese Spalte erforderlich.
- [String, optional] Zusätzlicher Stringtext, der angezeigt wird, wenn der Nutzer den Mauszeiger auf diese Region bewegt.
- [String, required] Ein Standort auf der Karte. Folgende Formate sind zulässig:
Hinweis:Eine Karte kann maximal 400 Einträge enthalten. Wenn Ihre DataTable oder DataView mehr als 400 Zeilen enthält, werden nur die ersten 400 Zeilen angezeigt. Die schnellsten Modi sind dataMode='regions'
mit Standorten, die als ISO-Codes angegeben sind, und dataMode='markers'
mit Breiten- und Längengraden. Der langsamste Modus ist dataMode='markers'
mit einer Stringadresse.
Wichtig: DataTable
muss jede optionale Spalte vor jeder Spalte enthalten, die Sie verwenden möchten. Wenn Sie beispielsweise einen Längen- und Breitengrad angeben und nur die Spalten 1, 2 und 4 verwenden möchten, muss DataTable
trotzdem die Spalte 3 definieren. Sie müssen jedoch keine Werte hinzufügen.
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!");
Konfigurationsoptionen
Name | Typ | Standard | Beschreibung |
---|---|---|---|
region |
String | 'Welt' | Der auf der Karte anzuzeigende Bereich. Die umliegenden Bereiche werden ebenfalls angezeigt. Dies kann entweder ein Ländercode (im ISO 3166-Großformat) oder einer der folgenden Strings sein:
Landkarten ermöglichen kein Scrollen oder Ziehen, sondern nur ein begrenztes Zoomverhalten. Ein einfacher Zoom kann durch Festlegen der Property |
dataMode |
String | 'regions' [Regionen] | So werden Werte auf der Karte angezeigt. Es werden zwei Werte unterstützt:
|
width |
String | „556 px“ | Breite der Visualisierung Wenn keine Einheiten angegeben sind, ist die Standardeinheit Pixel. |
height |
String | „347 px“ | Höhe der Visualisierung. Wenn keine Einheiten angegeben sind, ist die Standardeinheit Pixel. |
colors |
RGB-Zahlen im Format 0xRRGGBB | [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] | Farbverlauf, der Werten in der Visualisierung zugewiesen werden soll. Sie müssen mindestens zwei Werte haben. Der Farbverlauf enthält alle Ihre Werte sowie die berechneten Zwischenwerte mit der hellsten Farbe als kleinstem und dem dunkelsten Wert. |
showLegend |
boolean | true | Falls wahr, wird eine Legende für die Karte angezeigt. |
showZoomOut |
boolean | false | Bei „true“ wird eine Schaltfläche mit dem Label angezeigt, das im Attribut zoomOutLabel angegeben ist. Hinweis: Diese Schaltfläche hat nach dem Anklicken keine Auswirkung, mit Ausnahme des Ereignisses zoomOut .
Für das Zoomen erfassen Sie dieses Ereignis und ändern die Option region .
Sie können showZoomOut nur angeben, wenn die Option region kleiner als die Weltansicht ist. Eine Möglichkeit, das Zoomverhalten zu aktivieren, wäre, das Ereignis regionClick zu beobachten, die Eigenschaft region in die entsprechende Region zu ändern und die Karte neu zu laden. |
zoomOutLabel |
String | „Herauszoomen“ | Label für die Zoom-Schaltfläche. |
Methoden
Methode | Rückgabetyp | Beschreibung |
---|---|---|
draw(data, options) |
– | Zeichnet die Karte. Kann vor dem Zeichnen zurückkehren (siehe drawingDone() -Ereignis). |
getSelection() |
Array von Auswahlelementen | Standardimplementierung von getSelection() Ausgewählte Elemente sind Zeilen. Diese Methode funktioniert nur, wenn die Option dataMode „Regionen“ ist. Sie können nur eine Region mit einem zugewiesenen Wert auswählen. |
setSelection(selection) |
– | Standardimplementierung für setSelection() . Behandelt eine Auswahl als Zeilenauswahl und unterstützt die Auswahl mehrerer Zeilen. Es können nur Regionen mit zugewiesenen Werten ausgewählt werden. |
Ereignisse
Name | Beschreibung | Attribute |
---|---|---|
error |
Wird ausgelöst, wenn beim Rendern des Diagramms ein Fehler auftritt | ID, Nachricht |
select |
Wird ausgelöst, wenn der Nutzer auf eine Region mit einem zugewiesenen Wert klickt. Rufen Sie Hinweis: Aufgrund bestimmter Einschränkungen wird das Ereignis |
– |
regionClick |
Wird aufgerufen, wenn auf eine Region geklickt wird. Funktioniert sowohl für Hinweis: Aufgrund bestimmter Einschränkungen wird das Ereignis |
Ein Objekt mit einer einzelnen Eigenschaft (region ), bei der es sich um einen String im ISO-3166-Format handelt, der die angeklickte Region beschreibt. |
zoomOut |
Wird aufgerufen, wenn auf die Schaltfläche zum Herauszoomen geklickt wird. Für das Zoomen erfassen Sie dieses Ereignis und ändern die Option Hinweis: Aufgrund bestimmter Einschränkungen wird das Ereignis |
– |
drawingDone |
Wird nach dem Zeichnen der Landkarte aufgerufen. | – |
Datenrichtlinie
Standorte werden von Google Maps geocodiert. Daten, die keine Geocodierung erfordern, werden an keinen Server gesendet. Weitere Informationen finden Sie in den Google Maps-Nutzungsbedingungen.
Hinweise
Aufgrund von Flash-Sicherheitseinstellungen funktionieren diese und alle Flash-basierten Visualisierungen möglicherweise nicht richtig, wenn von einem Dateispeicherort im Browser (z.B. file:///c:/webhost/myhost/myviz.html) aus und nicht von einer Webserver-URL (z.B. http://www.myhost.com/myviz.html) zugegriffen wird. Dies ist in der Regel nur ein Testproblem. Du kannst dieses Problem beheben, wie auf der Macromedia-Website beschrieben.