Renderingtyp (Raster und Vektor)

Die Maps JavaScript API bietet zwei verschiedene Kartenimplementierungen: Raster und Vektor. Die Rasterkarte besteht aus einem Raster pixelbasierter Bildkacheln, die von der Google Maps Platform serverseitig generiert und dann an Ihre Webanwendung übergeben werden. Die Vektorkarte besteht aus vektorbasierten Kacheln, die beim Laden clientseitig mit WebGL erstellt werden. WebGL ist eine Webtechnologie, mit der der Browser auf die GPU des Geräts 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 Genauigkeit, ein besseres Caching für Karten sowie die Möglichkeit bietet, Neigung und Ausrichtung auf der Karte zu steuern. Weitere Informationen zu den Funktionen von Vektorkarten

Standardrenderingtyp

Der Standardrenderingtyp der Karte variiert je nach Implementierung.

Für Karten, die das <gmp-map>-Element verwenden, ist standardmäßig der Vektorrenderingtyp festgelegt.
Für Karten, die ein <div> Element mit google.maps.Map verwenden, ist standardmäßig der Raster renderingtyp festgelegt.

Sie können den Renderingtyp für eine Karte festlegen, indem Sie entweder die Kartenoption renderingType angeben oder die Option für eine verknüpfte Karten-ID festlegen. Die Option renderingType überschreibt alle Renderingtypeinstellungen, die durch Konfigurieren einer Karten-ID vorgenommen wurden.

Option `renderingType` angeben

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

Laden Sie die Bibliothek RenderingType. Dies kann beim Laden der Maps-Bibliothek erfolgen:
```
const { Map, RenderingType } = await google.maps.importLibrary("maps");
```

Geben Sie beim Initialisieren der Karte mit der Option renderingType entweder RenderingType.VECTOR oder RenderingType.RASTER an:

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

Wenn der Vektorrenderingtyp für die Karte festgelegt ist, müssen Sie die Optionen für die erforderlichen 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.

Für Karten, die mit dem <gmp-map> Element geladen werden, ist der Standardrenderingtyp google.maps.RenderingType.VECTOR festgelegt. Die Steuerung von Neigung und Ausrichtung ist aktiviert. Wenn Sie den Renderingtyp mit dem <gmp-map> Element festlegen möchten, verwenden Sie das rendering-type Attribut.

Renderingtyp mit einer Karten-ID festlegen

Sie können den Renderingtyp auch mit einer Karten-ID angeben. Erstellen Sie eine Karten-ID. Folgen Sie dazu der Anleitung 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 Position 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 als Nächstes den Initialisierungscode der Karte mit der erstellten Karten-ID. Sie können Ihre Karten-IDs auf der Seite Kartenverwaltung finden. Geben Sie eine Karten-ID an, wenn Sie die Karte mit der Eigenschaft mapId instanziieren:

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

Verwendeten Renderingtyp erkennen

Wenn Sie erkennen möchten, welcher Renderingtyp verwendet wird, rufen Sie getRenderingType() für das Kartenobjekt auf. Ein Beispiel:

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