Datenschicht

Plattform auswählen: Android iOS JavaScript

Die Google Maps-Datenebene ist ein Container für beliebige raumbezogene Daten. Mithilfe der Datenebene können Sie Ihre benutzerdefinierten Daten hinterlegen oder GeoJSON-Daten auf einer Google-Karte darstellen lassen.

Übersicht

Um mehr über die Datenebene zu erfahren, sehen Sie sich dieses DevBytes-Video an.

Mit der Maps JavaScript API können Sie einer Karte verschiedene Overlays hinzufügen, etwa Markierungen, Polylinien und Polygone. Dabei werden immer Stilinformationen mit Standortdaten kombiniert. Die Klasse google.maps.Data ist ein Container für beliebige raumbezogene Daten. Statt diese Overlays hinzuzufügen, können Sie Ihrer Karte mithilfe der Datenebene beliebige geografische Daten hinzufügen. Wenn die Daten geometrische Formen wie Punkte, Linien oder Polygone enthalten, werden diese von der API standardmäßig als Markierungen, Polylinien oder Polygone gerendert. Sie können diese Elemente wie ein normales Overlay formatieren oder Stilregeln auf Grundlage anderer Eigenschaften in Ihrem Dataset anwenden.

Die Klasse google.maps.Data bietet folgende Möglichkeiten:

  • Polygone auf der Karte zeichnen
  • Einer Karte GeoJSON-Daten hinzufügen
    GeoJSON ist ein Internetstandard für raumbezogene Daten. Die Klasse Data folgt bei der Datendarstellung der GeoJSON-Struktur, sodass sich GeoJSON-Daten problemlos anzeigen lassen. Mit der Methode loadGeoJson() können Sie GeoJSON-Daten ganz einfach importieren und Punkte, Linienzeichenfolgen und Polygone darstellen lassen.
  • Verwenden Sie google.maps.Data, wenn Sie beliebige Daten modellieren möchten.
    Den meisten realen Entitäten sind weitere Eigenschaften zugeordnet. Beispielsweise haben Geschäfte Öffnungszeiten, Straßen haben Verkehrsgeschwindigkeiten, und jede Gruppe von Pfadfinderinnen hat ihr eigenes Gebiet für den Verkauf von Keksen. Mit google.maps.Data können Sie diese Eigenschaften modellieren und Ihre Daten entsprechend gestalten.
  • Wählen Sie aus, wie Ihre Daten dargestellt werden sollen, und entscheiden Sie sich spontan wieder um.
    Mit der Datenebene können Sie die Darstellungs- und Interaktionseigenschaften Ihrer Daten festlegen. Beispielsweise können Sie bei der Betrachtung einer Karte mit Lebensmittelgeschäften festlegen, dass nur die Geschäfte angezeigt werden, die Fahrkarten für öffentliche Verkehrsmittel verkaufen.

Ein Polygon zeichnen

Die Klasse Data.Polygon übernimmt die Polygonkurven für Sie. Sie können ihr ein Array aus einem oder mehreren linearen Ringen übergeben, die als Breitengrad-/Längengradkoordinaten definiert sind. Der erste lineare Ring definiert den äußeren Rand des Polygons. Wenn Sie mehr als einen linearen Ring übergeben, werden der zweite und die nachfolgenden Ringe zur Definition von inneren Pfaden (Löchern) im Polygon verwendet.

Mit dem folgenden Beispiel wird ein rechteckiges Polygon mit zwei Löchern erstellt:

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;
index.js

GeoJSON laden

GeoJSON ist ein gängiger Internetstandard für die gemeinsame Nutzung raumbezogener Daten. Dieser schlanke und menschenlesbare Standard eignet sich ideal zum Teilen und gemeinsamen Nutzen von Daten. Mit der Datenebene können Sie einer Google-Karte mit einer einzigen Codezeile GeoJSON-Daten hinzufügen.

map.data.loadGeoJson('google.json');

Für jede Karte gibt es ein map.data-Objekt, das als Datenebene für beliebige räumliche Daten (einschließlich GeoJSON-Daten) fungiert. Sie können eine GeoJSON-Datei laden und darstellen lassen, indem Sie die Methode loadGeoJSON() des Objekts data aufrufen. Das nachfolgende Beispiel zeigt, wie Sie eine Karte hinzufügen und externe GeoJSON-Daten laden.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json",
  );
}

window.initMap = initMap;
index.js
Beispiel ansehen

Testbeispiel

GeoJSON-Beispiel

Für die meisten Beispiele auf dieser Seite wird eine allgemeine GeoJSON-Datei verwendet. Mit dieser Datei werden die sechs Zeichen in „Google“ als Polygone über Australien definiert. Sie können diese Datei gern kopieren oder verändern, um Ihre Datenebene zu testen.

Damit eine JSON-Datei aus einer anderen Domain geladen werden kann, muss für diese Domain Cross-Origin Resource Sharing aktiviert sein.

Sie können den Volltext der Datei nachfolgend aufrufen, indem Sie auf den kleinen Pfeil links neben „google.json“ klicken.

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

GeoJSON-Daten gestalten

Bestimmen Sie mit der Methode Data.setStyle(), wie Ihre Daten dargestellt werden sollen. Die Methode setStyle() verwendet entweder ein StyleOptions-Objektliteral oder eine Funktion, die den Stil für jedes Element berechnet.

Einfache Stilregeln

Die einfachste Möglichkeit, Stile für Elemente festzulegen, ist die Übergabe eines StyleOptions-Objektliterals an setStyle(). Damit wird ein einzelner Stil für jedes Element Ihrer Sammlung definiert. Von jedem Elementtyp kann nur eine Teilmenge der verfügbaren Optionen wiedergegeben werden. Das bedeutet, dass es möglich ist, Stile für verschiedene Elementtypen in einem einzigen Objektliteral zu kombinieren. Mit dem nachfolgenden Snippet werden beispielsweise ein benutzerdefiniertes icon-Objekt, das sich nur auf Punktgeometrien auswirkt, und ein fillColor-Objekt definiert, das sich nur auf Polygone auswirkt.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Weitere Informationen zu gültigen Kombinationen von Stil und Elementen finden Sie unter Stiloptionen.

Im Folgenden finden Sie ein Beispiel für das Festlegen des Strichs und der Füllfarbe für mehrere Elemente eines StyleOptions-Objektliterals. Alle Polygone sind in gleicher Weise gestaltet.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

Deklarative Stilregeln

Wenn Sie die Stile einer großen Anzahl von Overlays (z. B. Markierungen oder Polylinien) aktualisieren möchten, müssen Sie in der Regel jedes einzelnes Overlay auf Ihrer Karte iterieren und einzeln gestalten. Mit der Datenebene können Sie Regeln deklarativ festlegen, sodass diese für Ihren gesamten Datenpool übernommen werden. Wenn die Daten oder die Regeln aktualisiert werden, wird der Stil automatisch für jedes Element übernommen. Sie können die Eigenschaften eines Elements dazu verwenden, seinen Stil anzupassen.

Mit dem folgenden Code wird beispielsweise die Farbe jedes Zeichens in google.json anhand der jeweiligen Zeichenposition im ASCII-Zeichensatz festgelegt. In diesem Fall haben wir die Zeichenposition gemeinsam mit unseren Daten codiert.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Stile entfernen

Wenn Sie angewendete Stile entfernen möchten, übergeben Sie ein leeres Objektliteral an die Methode setStyles().

// Remove custom styles.
map.data.setStyle({});

Dadurch werden sämtliche von Ihnen definierten Stile entfernt, und die Elemente werden wieder mit den Standardstilen gerendert. Wenn die Elemente stattdessen nicht mehr gerendert werden sollen, legen Sie die Eigenschaft visible von StyleOptions auf false fest.

// Hide the Data layer.
map.data.setStyle({visible: false});

Standardstile überschreiben

Stilregeln werden normalerweise auf alle Elemente der Datenebene angewendet. Es kann jedoch in besonderen Fällen gewünscht sein, für einzelne Elemente spezielle Stilregeln zu verwenden, beispielsweise, um ein Element beim Anklicken hervorzuheben.

Um spezielle Stilregeln anzuwenden, verwenden Sie die Methode overrideStyle(). Sämtliche Eigenschaften, die Sie mit der Methode overrideStyle() ändern, werden zusätzlich zu den bereits in setStyle() angegebenen globalen Stilen angewendet. Mit dem nachfolgenden Code können Sie beispielsweise festlegen, dass sich die Füllfarbe eines Polygons beim Anklicken ändert. Weitere Stile werden damit jedoch nicht definiert.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

Wenn Sie alle Stilüberschreibungen entfernen möchten, rufen Sie die Methode revertStyle() auf.

Stiloptionen

Welche Stiloptionen für die einzelnen Elemente verfügbar sind, richtet sich nach dem Typ des Elements. So wird beispielsweise fillColor nur bei Polygongeometrien gerendert, während icon nur bei einer Punktgeometrie erscheint. Weitere Informationen finden Sie in der Referenzdokumentation zu StyleOptions.

Für alle Geometrien verfügbar

  • clickable: Wenn true festgelegt ist, empfängt das Element Maus- und Touch-Events.
  • visible: Wenn true festgelegt ist, ist das Element sichtbar.
  • zIndex: Alle Elemente werden auf der Grundlage ihres zIndex-Werts in absteigender Reihenfolge auf der Karte angezeigt. Markierungen werden immer vor Linienstrings und Polygonen angezeigt.

Für Punktgeometrien verfügbar

  • cursor: Wenn der Mauszeiger auf ein Objekt bewegt wird, wird der Cursor angezeigt.
  • icon: Für die Punktgeometrie anzuzeigendes Symbol.
  • shape: Definiert die Imagemap, die für die Trefferermittlung verwendet wird.
  • title: Mouseover-Text.

Für Liniengeometrien verfügbar

  • strokeColor: Die Strichfarbe. Alle CSS3-Farben mit Ausnahme von Farben mit erweiterten Namen werden unterstützt.
  • strokeOpacity: Die Deckkraft des Strichs (Wert zwischen 0,0 und 1,0).
  • strokeWeight: Die Strichbreite in Pixeln.

Für Polygongeometrien verfügbar

  • fillColor: Die Füllfarbe. Alle CSS3-Farben mit Ausnahme von Farben mit erweiterten Namen werden unterstützt.
  • fillOpacity: Die Deckkraft der Füllung (Wert zwischen 0.0 und 1.0.).
  • strokeColor: Die Strichfarbe. Alle CSS3-Farben mit Ausnahme von Farben mit erweiterten Namen werden unterstützt.
  • strokeOpacity: Die Deckkraft des Strichs (Wert zwischen 0,0 und 1,0).
  • strokeWeight: Die Strichbreite in Pixeln.

Event-Handler hinzufügen

Elemente reagieren auf Events (Ereignisse) wie mouseup oder mousedown. Sie können Event-Listener hinzufügen, um dem Nutzer die Interaktion mit den Daten auf der Karte zu ermöglichen. Im nachfolgenden Beispiel wird ein Mouseover-Ereignis hinzugefügt, mit dem Informationen zu dem Element angezeigt werden, auf das der Mauscursor zeigt.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

Datenebenen-Ereignisse

Die folgenden Ereignisse sind unabhängig von ihrer Geometrie für alle Elemente verfügbar:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Weitere Informationen zu diesen Ereignissen finden Sie in der Referenzdokumentation zur Klasse google.maps.data.

Erscheinungsbild dynamisch anpassen

Sie können den Stil der Datenebene festlegen, indem Sie eine Funktion zur Berechnung des Stils jedes Elements an die Methode google.maps.data.setStyle() übergeben. Diese Funktion wird dann bei jeder Aktualisierung der Eigenschaften eines Elements aufgerufen.

Im nachfolgenden Beispiel fügen wir dem click-Ereignis einen Event-Listener hinzu, mit dem die Eigenschaft isColorful des Elements aktualisiert wird. Der Stil des Elements wird aktualisiert und gibt die Änderung wieder, sobald die Eigenschaft definiert ist.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});