3D-Karten anpassen

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

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

Das cloudbasierte Gestalten von Karteninhalten ermöglicht die 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 Maps Console 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 Erholungsgebiete 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();
index.js

Übersicht

Das Anpassen von 3D-Karten mit den Funktionen für das cloudbasierte 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	Cloudbasierten Kartenstil erstellen	Sie müssen „3D-Hybrid“ auswählen und in diesem Schritt den hellen Modus verwenden.
3	Kartenstil mit einer Karte verknüpfen	Verknüpfen Sie den 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.

Eine ausführliche Anleitung 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.

Um die Karten-ID zu aktualisieren, legen Sie die mapId-Eigenschaft 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 mapId-Eigenschaft das HTML-Attribut widerspiegelt, 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 von cloudbasiertem Gestalten von Karteninhalten mit 3D-Karten in Maps JavaScript sind bestimmte Einschränkungen zu beachten:

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