Datenschicht

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Plattform auswählen: Android iOS JavaScript

Die Google Maps Datenebene stellt einen Container für beliebige raumbezogene Geodaten bereit. Sie können die Datenschicht verwenden, um Ihre benutzerdefinierten Daten zu speichern oder GeoJSON-Daten auf einer Google-Karte darzustellen.

Übersicht

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

In der Maps JavaScript API kannst du eine Karte mit verschiedenen Overlays wie Markierungen, Polylinien, Polygonen usw. auszeichnen. Bei jeder dieser Annotationen werden 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 der Karte über die Datenschicht beliebige geografische Daten hinzufügen. Wenn diese Daten Geometrien wie Punkte, Linien oder Polygone enthalten, werden sie von der API standardmäßig als Markierungen, Polylinien und Polygone gerendert. Sie können diese Merkmale wie ein normales Overlay gestalten oder Stilregeln anhand anderer Attribute in Ihrem Dataset anwenden.

Mit der Klasse google.maps.Data können Sie:

  • Polygone auf der Karte zeichnen
  • GeoJSON-Daten zu einer Karte hinzufügen
    GeoJSON ist ein Standard für raumbezogene Daten im Internet. Die Klasse Data folgt der Struktur von GeoJSON in ihrer Datendarstellung und vereinfacht die Anzeige von GeoJSON-Daten. Mit der Methode loadGeoJson() können Sie GeoJSON-Daten ganz einfach importieren und Punkte, Linienstrings und Polygone anzeigen lassen.
  • Verwenden Sie google.maps.Data, um beliebige Daten zu modellieren.
    Den meisten realen Elementen sind andere Properties zugeordnet. Beispielsweise gibt es Geschäfte mit Öffnungszeiten, Straßen mit hoher Verkehrsgeschwindigkeit und jeder Girl-Guide-Truppe bietet Plätze zum Verkauf von Cookies. Mit google.maps.Data können Sie diese Properties modellieren und die Daten entsprechend gestalten.
  • Wählen Sie aus, wie Ihre Daten dargestellt werden sollen, und ändern Sie dies umgehend.
    Mit der Datenschicht können Sie Entscheidungen über die Visualisierung und Interaktion Ihrer Daten treffen. Wenn Sie sich beispielsweise die Karte mit Minimarkten ansehen, werden nur die Geschäfte angezeigt, die Fahrkarten für öffentliche Verkehrsmittel verkaufen.

Ein Polygon zeichnen

Die Klasse Data.Polygon übernimmt die Polygonkurven für Sie. Sie können ein Array mit einem oder mehreren linearen Ringen übergeben, die als Koordinaten für Breiten- und Längengrad definiert sind. Der erste lineare Ring definiert die äußere Begrenzung des Polygons. Wenn Sie mehr als einen linearen Ring übergeben, werden der zweite und die nachfolgenden linearen Ringe verwendet, um die inneren Pfade (Löcher) im Polygon zu definieren.

Mit dem folgenden Beispiel wird ein rechteckiges Polygon erstellt, in dem sich zwei Löcher befinden:

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;

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 },
    { lat: -35.364, lng: 153.207 },
    { lat: -35.364, lng: 158.207 },
    { 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;

GeoJSON laden

GeoJSON ist ein gemeinsamer Standard für die Freigabe von raumbezogenen Daten im Internet. Das Tool ist schlank und leicht lesbar und damit ideal für die gemeinsame Nutzung und Zusammenarbeit. Mit der Datenschicht können Sie GeoJSON-Daten in einer einzigen Codezeile zu einer Google-Karte hinzufügen.

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

Jede Karte hat ein map.data-Objekt, das als Datenschicht für beliebige raumbezogene raumbezogene Daten fungiert, einschließlich GeoJSON. Sie können eine GeoJSON-Datei laden und anzeigen, indem Sie die Methode loadGeoJSON() des Objekts data aufrufen. Das folgende 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;

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;
Beispiel ansehen

Beispiel ausprobieren

GeoJSON-Beispiel

Für die meisten Beispiele auf dieser Seite wird eine allgemeine GeoJSON-Datei verwendet. Diese Datei definiert die sechs Zeichen in „Google“ als Polygone über Australien. Sie können diese Datei beim Testen der Datenschicht kopieren oder ändern.

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

Den vollständigen Text der Datei sehen Sie unten, indem Sie auf den kleinen Pfeil neben den Wörtern „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 formatieren

Mit der Methode Data.setStyle() können Sie festlegen, wie Ihre Daten aussehen sollen. Die Methode setStyle() verwendet entweder ein StyleOptions-Objektliteral oder eine Funktion, die den Stil für jedes Feature berechnet.

Einfache Formatregeln

Die einfachste Möglichkeit, Stile für Elemente festzulegen, ist die Übergabe eines StyleOptions-Objektliterals an setStyle(). Dadurch wird für jedes Element in Ihrer Sammlung ein einzelner Stil festgelegt. Beachten Sie, dass jeder Featuretyp nur einen Teil der verfügbaren Optionen rendern kann. Das bedeutet, dass es möglich ist, Stile für verschiedene Featuretypen in einem einzelnen Objekt-Literal zu kombinieren. Das folgende Snippet legt beispielsweise sowohl ein benutzerdefiniertes icon fest, das nur Punkt-Geometrien betrifft, als auch fillColor, das nur Polygone betrifft.

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

Weitere Informationen zu gültigen Kombinationen aus Stil und Ausstattung findest du unter Stiloptionen.

Im Folgenden finden Sie ein Beispiel für das Festlegen von Strich- und Füllfarbe für mehrere Funktionen mit einem StyleOptions-Objektliteral. Jedes Polygon hat denselben Stil.

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

Deklarative Formatregeln

Wenn du den Stil einer großen Anzahl von Overlays wie Markierungen oder Polylinien aktualisieren möchtest, musst du in der Regel jedes Overlay auf deiner Karte durchlaufen und den Stil einzeln festlegen. Mit der Datenschicht können Sie Regeln deklarativ festlegen, die dann auf den gesamten Datensatz angewendet werden. Wenn entweder die Daten oder die Regeln aktualisiert werden, wird der Stil automatisch auf jedes Feature angewendet. Sie können die Eigenschaften einer Funktion dazu verwenden, ihre Formate anzupassen.

Mit dem folgenden Code wird beispielsweise die Farbe jedes Zeichens in unserem google.json festgelegt, indem die Position im ASCII-Zeichensatz untersucht wird. In diesem Fall haben wir die Zeichenposition zusammen 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
    };
});

Formate 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 alle von Ihnen angegebenen benutzerdefinierten Stile entfernt und die Funktionen werden mit den Standardstilen gerendert. Wenn du stattdessen die Features nicht mehr rendern möchtest, setze die Property visible von StyleOptions auf false.

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

Standardformate übersteuern

Formatregeln werden in der Regel für jede Funktion der Data-Ebene übernommen. Manchmal können Sie jedoch spezielle Stilregeln auf bestimmte Funktionen anwenden. beispielsweise, um eine Funktion beim Anklicken hervorzuheben.

Mit der Methode overrideStyle() können Sie spezielle Stilregeln anwenden. Alle Attribute, die Sie mit der Methode overrideStyle() ändern, werden zusätzlich zu den bereits in setStyle() angegebenen globalen Stilen angewendet. Mit dem folgenden Code wird beispielsweise die Füllfarbe eines Polygons beim Klicken geändert, es werden jedoch keine anderen Stile festgelegt.

// 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'});
});

Rufen Sie die Methode revertStyle() auf, um alle Stilüberschreibungen zu entfernen.

Stiloptionen

Die für die einzelnen Funktionen verfügbaren Formatoptionen hängen vom jeweiligen Funktionstyp ab. Beispielsweise wird fillColor nur in Polygon-Geometrien gerendert, während icon nur in einer Punkt-Geometrie dargestellt wird. Weitere Informationen finden Sie in der Referenzdokumentation zu StyleOptions.

Für alle Geometrien verfügbar

  • clickable: Wenn true, empfängt die Funktion Maus- und Touch-Ereignisse
  • visible: Wenn true, ist das Element sichtbar.
  • zIndex: Alle Elemente werden auf der Karte in der Reihenfolge ihrer zIndex angezeigt, wobei höhere Werte vor Elementen mit niedrigeren Werten angezeigt werden. Marker werden immer vor Linienzeichenfolgen und Polygonen angezeigt.

Für Punkt-Geometrien verfügbar

  • cursor: Mauszeiger, der beim Bewegen der Maus zu sehen ist.
  • icon: Symbol für die Punkt-Geometrie.
  • shape: Definiert die Bildzuordnung für die Treffererkennung.
  • title: Mouseover-Text.

Für Linien-Geometrien verfügbar

  • strokeColor: Die Strichfarbe. Mit Ausnahme von erweiterten benannten Farben werden alle CSS3-Farben unterstützt.
  • strokeOpacity: Die Deckkraft der Linie zwischen 0,0 und 1,0.
  • strokeWeight: Die Strichbreite in Pixeln.

Für Polygon-Geometrien verfügbar

  • fillColor: Die Füllfarbe. Mit Ausnahme von erweiterten benannten Farben werden alle CSS3-Farben unterstützt.
  • fillOpacity: Die Deckkraft der Füllung zwischen 0.0 und 1.0.
  • strokeColor: Die Strichfarbe. Mit Ausnahme von erweiterten benannten Farben werden alle CSS3-Farben unterstützt.
  • strokeOpacity: Die Deckkraft der Linie zwischen 0,0 und 1,0.
  • strokeWeight: Die Strichbreite in Pixeln.

Ereignishandler hinzufügen

Funktionen reagieren auf Ereignisse wie mouseup oder mousedown. Du kannst Ereignis-Listener hinzufügen, damit Nutzer mit den Daten auf der Karte interagieren können. Im folgenden Beispiel fügen wir ein Mouseover-Ereignis hinzu, das Informationen zu dem Feature unter dem Mauszeiger anzeigt.

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

Data-Ebenen-Ereignisse

Die folgenden Ereignisse gelten für alle Features, unabhängig von ihrem Geometrietyp:

  • 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 Datenschicht festlegen. Dazu übergeben Sie eine Funktion, die den Stil jedes Merkmals an die Methode google.maps.data.setStyle() berechnet. Diese Funktion wird jedes Mal aufgerufen, wenn die Attribute einer Funktion aktualisiert werden.

Im folgenden Beispiel fügen wir einen Ereignis-Listener für das Ereignis click hinzu, mit dem das Attribut isColorful der Funktion aktualisiert wird. Der Stil des Elements wird aktualisiert, um die Änderung widerzuspiegeln, sobald das Attribut festgelegt 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();
});