3D-Karten anpassen

Sie können das Erscheinungsbild der 3D-Basiskarte mithilfe des cloudbasierten Gestaltens von Karteninhalten anpassen.

Mit den Funktionen für das cloudbasierte Gestalten von Karteninhalten können Sie das Design der Karte steuern, die Sie Nutzern präsentieren. 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 von Symbolen und Text für Freizeitelemente 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 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 die Stile zu verarbeiten. In den folgenden Schritten verknüpfen Sie einen benutzerdefinierten Stil mit dieser Karten-ID.
2	Cloudbasierten Kartenstil erstellen	Wählen Sie in diesem Schritt „3D-Straßenkarte“ (unterstützt den hellen und dunklen Modus) oder „3D-Hybrid“ (unterstützt den hellen Modus) aus.
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.

Ausführliche Informationen zum Erstellen von Kartenstilen finden Sie unter Kartenstile erstellen und verwenden.

Karten-ID dynamisch aktualisieren

Sie können das Attribut 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 zurückverweist, 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 Maps JavaScript sind bestimmte Einschränkungen zu beachten:

• Der dunkle Modus wird nur im ROADMAP-Modus unterstützt. In den Modi HYBRID und SATELLITE wird er nicht unterstützt.
• Funktionen, für die eine Karten-ID erforderlich ist, z. B. datengestützte Stile, werden nicht unterstützt.