Diese Seite wurde von der Cloud Translation API übersetzt.

Visualisierung: Landkarte

Overview
Beispiele
Loading
Datenformat
Konfigurationsoptionen
Methoden
Ereignisse
Datenrichtlinie
Notes

Übersicht

Eine Geokarte ist eine Karte eines Landes, eines Kontinents oder einer Region, auf der Farben und Werte bestimmten Regionen zugewiesen sind. Die Werte werden als Farbskala dargestellt. Sie können optional einen Hovertext für Regionen angeben. Die Karte wird im Browser mit einem eingebetteten Flash-Player gerendert. Die Karte kann nicht gescrollt oder ziehbar sein, sie kann aber so konfiguriert werden, dass Zoomen möglich ist.

Beispiele

Hier sind zwei Beispiele: In einem wird der Darstellungsstil für Regionen verwendet und in einem anderen der Darstellungsstil von Markierungen.

Beispiel für Regionen

Der Stil für Regionen füllt ganze Regionen (in der Regel Länder) mit Farben, die den von Ihnen zugewiesenen Werten entsprechen. Geben Sie den Regionsstil an, indem Sie options['dataMode'] = 'regions' in Ihrem Code 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

Beim Stil „Markierungen“ wird für die von Ihnen angegebenen Bereiche ein Kreis in Größe und Farbe angezeigt, der einen Wert angibt.

<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 „google.charts.load“ lautet „"geomap"“

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

Der Name der Geokarten-Visualisierungsklasse 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 einen der beiden Typen verwenden. Typen dürfen nicht kombiniert werden.

Format 1: Breiten- und Längengrade. Dieses Format funktioniert nur, wenn die Option dataMode „markers“ ist. Wenn dieses Format verwendet wird, musst du das Google Maps-JavaScript nicht verwenden. Der Standort wird in zwei Spalten eingegeben, plus zwei optionale Spalten:
1. [Number, required] Ein Breitengrad. Positive Zahlen entsprechen Norden, negative Zahlen Süden.
2. [Number, required] Ein Längengrad. Positive Zahlen entsprechen Osten, negative Zahlen Westen.
3. [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.
4. [String, optional] Zusätzlicher Stringtext, der angezeigt wird, wenn der Nutzer den Mauszeiger auf diese Region bewegt.
Format 2: Adresse, Ländername, Regionsname, Standorte oder US-Großraumvorwahlen. Dieses Format funktioniert mit der Option dataMode, die entweder auf „Markierungen“ oder „Regionen“ festgelegt ist. Der Standort wird in einer Spalte angegeben, plus zwei optionale Spalten:
1. [String, required] Ein Standort auf der Karte. Folgende Formate werden akzeptiert:
  - Eine bestimmte Adresse, z. B. „Hauptstraße 16“.
  - Ein Ländername als String (z. B. "England") oder ein ISO-3166-Code in Großbuchstaben oder sein äquivalentes englisches Textzeichen (z. B. "GB" oder "Vereinigtes Königreich").
  - Ein großgeschriebener Regionscode gemäß ISO-3166-2 oder ein äquivalentes englisches Textelement, z. B. „US-NJ“ oder „New Jersey“. Hinweis: Regionen können nur angegeben werden, wenn die dataMode-Option auf „regions“ festgelegt ist.
  - Eine Metropolvorwahl. Dies sind dreistellige Großraumcodes, mit denen verschiedene Regionen gekennzeichnet werden. Nur US-Codes werden unterstützt. Beachten Sie, dass diese nicht mit Vorwahlen identisch sind.
2. [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.
3. [String, optional] Zusätzlicher Stringtext, der angezeigt wird, wenn der Nutzer den Mauszeiger auf diese Region bewegt.

Hinweis: Auf einer Karte können maximal 400 Einträge angezeigt werden. Wenn Ihre DataTable oder DataView mehr als 400 Zeilen umfasst, werden nur die ersten 400 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: Ihre DataTable muss jede optionale Spalte vor jeder zu verwendenden Spalte enthalten. Wenn Sie beispielsweise eine Tabelle mit Längen- und Breitengraden angeben und nur die Spalten 1, 2 und 4 verwenden möchten, muss in DataTable noch Spalte 3 definiert werden, Sie müssen aber 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	"world"	Das Gebiet, das auf der Karte angezeigt werden soll. (Umliegende Gebiete werden ebenfalls angezeigt.) Der Wert kann entweder ein Ländercode (im ISO-3166 in Großbuchstaben) oder ein einer der folgenden Strings sein: `world` – (Ganze Welt) `us_metro`: (USA, Großräume) `005` – (Südamerika) `013`: (Mittelamerika) `021` (Nordamerika) `002` – (Ganz Afrika) `017`: (Zentralafrika) `015` – (Nordafrika) `018` – (Südafrika) `030` – (Ostasien) `034` – (Südasien) `035` (Asien/Pazifik) `009` – (Ozeanien) `145` – (Naher Osten) `143` – (Zentralasien) `151` – (Nordasien) `154` (Nordeuropa) `155` (Westeuropa) `039` (Südeuropa) Für Landkarten ist kein Scrollen oder Ziehen möglich, sondern nur ein eingeschränkter Zoom. Ein einfaches Herauszoomen kann durch Festlegen der Eigenschaft `showZoomOut` aktiviert werden.
`dataMode`	String	„regions“ (Regionen)	So blenden Sie Werte auf der Karte ein. Es werden zwei Werte unterstützt: `regions`: Färbt einen ganzen Bereich mit der entsprechenden Farbe ein. Diese Option kann nicht für Adressen mit Breiten- und Längengrad verwendet werden. Siehe Beispiel für Regionen. `markers`: zeigt einen Punkt über einem Bereich an, wobei Farbe und Größe den Wert angeben. Siehe Markierungsbeispiel.
`width`	String	"556px"	Breite der Visualisierung. Wenn keine Einheiten angegeben sind, werden Pixel als Standardeinheit verwendet.
`height`	String	"347px"	Höhe der Visualisierung. Wenn keine Einheiten angegeben sind, werden Pixel als Standardeinheit verwendet.
`colors`	Array von RGB-Zahlen im Format 0xRRGGBB	[0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]	Farbverlauf, der den Werten in der Visualisierung zugewiesen wird. Sie müssen mindestens zwei Werte angeben. Der Farbverlauf umfasst alle Ihre Werte sowie berechnete Zwischenwerte, wobei die hellste Farbe der kleinste Wert und die dunkelste der höchste Wert ist.
`showLegend`	boolean	true	Falls wahr, wird eine Legende für die Karte angezeigt.
`showZoomOut`	boolean	false	Wenn dies auf „true“ gesetzt ist, wird eine Schaltfläche mit dem Label angezeigt, das durch das Attribut `zoomOutLabel` angegeben wird. Beachten Sie, dass diese Schaltfläche nichts bewirkt, wenn sie angeklickt wird, außer dass das Ereignis `zoomOut` ausgelöst wird. Erfassen Sie dieses Ereignis und ändern Sie die Option `region`, um das Zoomen zu bearbeiten. Sie können `showZoomOut` nur angeben, wenn die Option `region` kleiner als die Weltansicht ist. Eine Möglichkeit, das Heranzoomen zu aktivieren, besteht darin, auf das `regionClick`-Ereignis zu warten, 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)`	Ohne	Zeichnet die Karte. Kann zurückkehren, bevor das Zeichnen abgeschlossen ist (siehe Ereignis `drawingDone()`).
`getSelection()`	Array von Auswahlelementen	Standardimplementierung von `getSelection()` Die ausgewählten Elemente sind Zeilen. Diese Methode funktioniert nur, wenn die Option `dataMode` auf „regions“ gesetzt ist. Sie können nur eine Region mit einem zugewiesenen Wert auswählen.
`setSelection(selection)`	Ohne	Standardmäßige `setSelection()`-Implementierung. Behandelt eine Auswahl als Zeilenauswahl und unterstützt die Mehrfachauswahl von Zeilen. Es können nur Regionen mit zugewiesenen Werten ausgewählt werden.

Ereignisse

Name	Beschreibung	Attribute
`error`	Wird ausgelöst, wenn beim Versuch, das Diagramm zu rendern, ein Fehler auftritt.	ID, Nachricht
`select`	Wird ausgelöst, wenn der Nutzer auf eine Region mit einem zugewiesenen Wert klickt. Wenn Sie wissen möchten, was ausgewählt wurde, rufen Sie `getSelection()` auf. Diese Option ist nur verfügbar, wenn die Option `dataMode` auf „Regionen“ festgelegt ist. Hinweis: Aufgrund bestimmter Einschränkungen wird das Ereignis `select` nicht ausgelöst, wenn Sie in Ihrem Browser als Datei auf die Seite zugreifen (z.B. „file://“) und nicht von einem Server (z.B. "http://www").	Ohne
`regionClick`	Wird aufgerufen, wenn auf eine Region geklickt wird. Funktioniert sowohl für „Regionen“ als auch für „Markierungen“ `dataMode`. Im Markierungsmodus wird dies jedoch nicht für das spezifische Land ausgegeben, das in der Option „Region“ zugewiesen ist (wenn ein bestimmtes Land aufgeführt ist). Hinweis: Aufgrund bestimmter Einschränkungen wird das Ereignis `regionClick` nicht ausgelöst, wenn du die Seite in deinem Browser als Datei (z.B. „file://“) und nicht von einem Server (z.B. "http://www").	Ein Objekt mit der 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. Erfassen Sie dieses Ereignis und ändern Sie die Option `region`, um das Zoomen zu verarbeiten. Hinweis: Aufgrund bestimmter Einschränkungen wird das Ereignis `zoomOut` nicht ausgelöst, wenn Sie in Ihrem Browser als Datei auf die Seite zugreifen (z.B. „file://“) und nicht von einem Server (z.B. "http://www").	Ohne
`drawingDone`	Wird aufgerufen, wenn das Zeichnen der Geomap abgeschlossen ist.	Ohne

Datenrichtlinie

Standorte werden von Google Maps geocodiert. Daten, die keine Geocodierung erfordern, werden an keinen Server gesendet. Weitere Informationen zu den Datenrichtlinien finden Sie in den Google Maps-Nutzungsbedingungen.

Hinweise

Aufgrund der Flash-Sicherheitseinstellungen funktionieren diese Methode (und alle Flash-basierten Visualisierungen) möglicherweise nicht ordnungsgemäß, wenn sie von einem Dateispeicherort im Browser (z.B. file:///c:/webhost/myhost/myviz.html) statt über eine Webserver-URL (z.B. http://www.myhost.com/myviz.html) aufgerufen werden. Dies ist in der Regel nur ein Testproblem. Sie können dieses Problem wie auf der Macromedia-Website beschrieben beheben.