Renderingtyp (Raster und Vektor)

Die Maps JavaScript API bietet zwei verschiedene Kartenimplementierungen: Raster und Vektor. Bei der Rasterkarte wird die Karte als Rasterbildkacheln geladen, die aus Pixeln bestehen. Diese werden serverseitig von der Google Maps Platform generiert und dann an Ihre Web-App gesendet. Die Vektorkarte besteht aus vektorbasierten Kacheln, die zur Ladezeit clientseitig mit WebGL gerendert werden. WebGL ist eine Webtechnologie, mit der der Browser auf die GPU auf dem Gerät des Nutzers zugreifen kann, um 2D- und 3D-Grafiken zu rendern.

Der Vektorkartentyp wird für eine optimale Nutzerfreundlichkeit empfohlen, da er eine verbesserte visuelle Darstellung, besseres Caching für Karten sowie die Möglichkeit bietet, Neigung und Ausrichtung auf der Karte zu steuern. Weitere Informationen zu Funktionen von Vektorkarten

Standardrendertyp

Der Standardrendertyp der Karte hängt von Ihrer Implementierung ab.

  • Für Karten, die das Element <gmp-map> verwenden, wird standardmäßig der Vektor-Rendering-Typ verwendet.

  • Bei Karten, die ein <div>-Element mit google.maps.Map verwenden, wird standardmäßig der Raster-Rendering-Typ verwendet.

Legen Sie den Rendertyp für eine Karte fest, indem Sie entweder die Kartenoption renderingType angeben oder die Option für eine zugehörige Karten-ID festlegen. Mit der Option renderingType werden alle Einstellungen für den Rendertyp überschrieben, die durch Konfigurieren einer Karten-ID vorgenommen wurden.

Option renderingType angeben

Mit der Option renderingType können Sie entweder den Raster- oder den Vektortyp für das Rendern Ihrer Karte angeben. Eine Karten-ID ist nicht erforderlich. Bei Karten, die mit einem div-Element und JavaScript geladen werden, ist der Standardrendertyp google.maps.RenderingType.RASTER. So legen Sie die Option renderingType fest:

  1. Laden Sie die RenderingType-Bibliothek. Das kann beim Laden der Maps-Bibliothek erfolgen:

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. Verwenden Sie beim Initialisieren der Karte die Option renderingType, um entweder RenderingType.VECTOR oder RenderingType.RASTER anzugeben:

    map = new Map(
  document.getElementById('map'),
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

Wenn der Renderingtyp für die Vektorkarte festgelegt ist, müssen Sie die Optionen für die benötigten Funktionen festlegen.

  • Wenn Sie die Neigung aktivieren möchten, legen Sie die Kartenoption tiltInteractionEnabled auf true fest oder rufen Sie map.setTiltInteractionEnabled(true) auf.
  • Wenn Sie das Schwenken aktivieren möchten, legen Sie die Kartenoption headingInteractionEnabled auf true fest oder rufen Sie map.setHeadingInteractionEnabled(true) auf.

Bei Karten, die mit dem <gmp-map>-Element geladen werden, ist der Standardrendertyp google.maps.RenderingType.VECTOR. Die Steuerung von Neigung und Ausrichtung ist aktiviert. Wenn Sie den Rendering-Typ mit dem <gmp-map>-Element festlegen möchten, verwenden Sie das Attribut rendering-type.

Rendertyp mit einer Karten-ID festlegen

Sie können den Rendertyp auch mit einer Karten-ID angeben. Eine Anleitung zum Erstellen einer Karten-ID finden Sie unter Cloudbasiertes Gestalten von Karteninhalten. Legen Sie den Kartentyp auf JavaScript fest und wählen Sie eine Option aus (Vektor oder Raster). Setzen Sie ein Häkchen bei Neigung und Drehung, um Neigung und Drehung auf der Karte zu aktivieren. Wenn Sie so vorgehen, lassen sich diese Werte programmatisch anpassen. Außerdem haben die Nutzer die Möglichkeit, Neigung und Ausrichtung direkt auf der Karte zu ändern. Wenn sich die Verwendung dieser Optionen negativ auf Ihre App auswirkt, lassen Sie Neigung und Drehung deaktiviert, damit Nutzer die Karte nicht neigen und drehen können.

Vektorkarten-ID erstellen

Aktualisieren Sie dann den Initialisierungscode der Karte mit der von Ihnen erstellten Karten-ID. Sie finden Ihre Karten-IDs auf der Seite Kartenverwaltung. Geben Sie eine Karten-ID an, wenn Sie die Karte mit der mapId-Eigenschaft instanziieren:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

Erkennen, welcher Rendering-Typ verwendet wird

Rufen Sie getRenderingType() für das Kartenobjekt auf, um zu ermitteln, welcher Renderingtyp verwendet wird, wie im folgenden Beispiel gezeigt:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```