3D-Karten anpassen

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

Mit Cloudbasiertem Gestalten von Karteninhalten haben Sie die Kontrolle über das Erscheinungsbild der Karte, 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();

Übersicht

Das Anpassen von 3D-Karten mit cloudbasiertem Gestalten von Karteninhalten funktioniert genauso wie bei 2D-Karten:

1 Karten-ID erstellen Karten-ID erstellen 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 in diesem Schritt „3D-Hybrid“ auswählen und 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 mapId-Eigenschaft 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-Property 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 einige 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.