3D-Karten anpassen

Mit dem cloudbasierten Gestalten von Karteninhalten können Sie das Erscheinungsbild der 3D-Basiskarte anpassen.

Mit dem cloudbasierten Gestalten von Karteninhalten haben Sie die Möglichkeit, das Erscheinungsbild der Karte zu steuern, die Nutzern angezeigt wird. Sie können beispielsweise die Dichte von POIs anpassen, bestimmte POI-Kategorien entfernen und die Füllung oder den Strich von Features ändern, um eine Karte zu erstellen, die auf Ihre Nutzer zugeschnitten ist.

Das cloudbasierte Gestalten von Karteninhalten bietet eine Bearbeitung ohne Code in der Google Cloud Console. Jeder benutzerdefinierte Stil, den Sie erstellen, ist mit einer Karten-ID verknüpft. Änderungen, die Sie in der Kartenkonsole an Ihrem Stil vornehmen, werden automatisch in Ihrer Anwendung angezeigt.

Im folgenden Beispiel wird eine Karte mit einem benutzerdefinierten Stil verwendet, um die Farbe der Symbole und des Texts für Freizeit-Features in Orange zu ändern:

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

Übersicht

Die Anpassung von 3D-Karten mit dem cloudbasierten Gestalten von Karteninhalten funktioniert genauso wie bei 2D-Karten:

1 Karten-ID erstellen Erstellen Sie eine Karten-ID. Karten-IDs werden an Ihre Anwendung übergeben, um das Styling zu verarbeiten. In den folgenden Schritten verknüpfen Sie einen benutzerdefinierten Stil mit dieser Karten-ID.
2 Cloudbasiertes Gestalten von Karteninhalten erstellen In diesem Schritt müssen Sie „3D-Hybrid“ auswählen und den „hellen Modus“ verwenden.
3 Kartenstil mit einer Karte verknüpfen Verknüpfen Sie Ihren Stil mit der Karten-ID, die Sie in Schritt 1 erstellt haben.
4 Karten-ID zur Anwendung hinzufügen Geben Sie die Karten-ID in Ihrem Code mit dem Parameter map-id an.
5 Karten-ID veröffentlichen Änderungen an Ihrem benutzerdefinierten Stil werden nach der Veröffentlichung automatisch in Ihre Anwendung übernommen.

Weitere Informationen zum Erstellen von Kartenstilen finden Sie unter Kartenstile erstellen und verwenden.

Karten-ID dynamisch aktualisieren

Sie können die Eigenschaft mapId dynamisch aktualisieren, nachdem die Karte instanziiert wurde. So können Sie einen anderen cloudbasierten Kartenstil anwenden, ohne die gesamte Map3DElement-Instanz neu erstellen zu müssen.

Wenn Sie die Karten-ID aktualisieren möchten, legen Sie die Eigenschaft mapId für die Map3DElement-Instanz fest:

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

Da die Eigenschaft „mapId“ auf das HTML-Attribut verweist, können Sie sie auch dynamisch aktualisieren, indem Sie das Attribut ändern:

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

Beschränkungen

Bei der Verwendung des cloudbasierten Gestaltens von Karteninhalten mit 3D-Karten in der Maps JavaScript API sind bestimmte Einschränkungen zu beachten:

  • Der dunkle Modus wird nicht unterstützt.
  • Funktionen, die Karten-IDs verwenden, z. B. datengestützte Stile, werden nicht unterstützt.