Diese Seite wurde von der Cloud Translation API übersetzt.

Erste fotorealistische 3D-Karte erstellen

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie Ihre erste 3D‑Karte mithilfe von fotorealistischen 3D‑Karten in Maps JavaScript erstellen. Sie lernen die Grundlagen zum Laden der richtigen Komponenten der Maps JavaScript API, zum Darstellen Ihrer ersten 3D‑Karte und zum Zeichnen von Elementen darauf kennen.

Was Sie erstellen werden

Erste Karte, die Sie erstellen.

In diesem Codelab erstellen Sie eine 3D-Webanwendung, die Folgendes ermöglicht:

Die Maps JavaScript API wird dynamisch geladen.
Eine 3D-Karte wird angezeigt, deren Mittelpunkt der CN Tower in Toronto ist.
Zeigt eine Begrenzung um einen Standort herum an.
Die POIs auf der 3D-Karte werden deaktiviert.
Die Begrenzung wird so extrudiert, dass sie den Standort bedeckt.

Lerninhalte

Erste Schritte mit der Google Maps Platform
Die Maps JavaScript API wird dynamisch aus JavaScript-Code mit Dynamic Library Import geladen.
Laden Sie eine 3D-Karte mit der Klasse „Map3DElement“ herunter.
Mit Polygonen und Extrusionen auf der Karte zeichnen

2. Vorbereitung

Sie müssen sich mit den hier aufgeführten Elementen vertraut machen, um dieses Codelab abzuschließen. Wenn Sie bereits mit der Google Maps Platform vertraut sind, können Sie mit dem Codelab fortfahren.

Erforderliche Google Maps Platform-Produkte

In diesem Codelab verwenden Sie die folgenden Google Maps Platform-Produkte:

Maps JavaScript API

Ja, das ist alles, was Sie tun müssen, um Ihrer Seite 3D-Karten hinzuzufügen. Es ist ganz einfach.

Weitere Anforderungen für dieses Codelab

Für dieses Codelab benötigen Sie die folgenden Konten, Dienste und Tools:

Ein Google Cloud-Konto mit aktivierter Abrechnung
Einen Google Maps Platform API-Schlüssel mit aktivierter Maps JavaScript API
Grundkenntnisse in JavaScript, HTML und CSS
Einen Texteditor oder eine IDE Ihrer Wahl, um eine Datei zum Ansehen zu speichern und zu bearbeiten
Einen Webbrowser, in dem Sie die Datei während der Arbeit ansehen können

3. Einrichten

Google Maps Platform einrichten

Wenn Sie noch kein Google Cloud-Konto und kein Projekt mit aktivierter Abrechnung haben, lesen Sie den Leitfaden Erste Schritte mit der Google Maps Platform, um ein Rechnungskonto und ein Projekt zu erstellen.

Klicken Sie in der Cloud Console auf das Drop-down-Menü „Projekt“ und wählen Sie das Projekt aus, das Sie für dieses Codelab verwenden möchten.

Aktivieren Sie die für dieses Codelab erforderlichen APIs und SDKs der Google Maps Platform im Google Cloud Marketplace. Folgen Sie dazu der Anleitung in diesem Video oder dieser Dokumentation.
Erstellen Sie auf der Seite Anmeldedaten der Cloud Console einen API-Schlüssel. Eine Anleitung dazu findest du in diesem Video oder in dieser Dokumentation. Für alle Anfragen an die Google Maps Platform ist ein API-Schlüssel erforderlich.

4. Maps JavaScript API laden

Nachdem Sie alle Schritte im Abschnitt „Einrichtung“ ausgeführt haben, können Sie mit dem Erstellen Ihrer ersten 3D‑Karte beginnen.

Erstellen Sie die einfachste Webseite, die Sie sich vorstellen können.

Zuerst erstellen wir eine sehr einfache Webseite, auf der wir unseren gesamten Code hosten. Sie können dies in einem beliebigen Editor oder auf einer beliebigen Plattform tun.

 <!DOCTYPE html>
 <html>
   <head>
    <title>3D Maps Codelab</title>
     <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
   </head>
   <body>
   </body>
 </html>

Fügen Sie den Code hinzu und speichern Sie die Datei an einem zugänglichen Speicherort mit einem Namen wie „3dmap.html“. Öffnen Sie sie dann in einem Webbrowser, um den aktuellen Status der Seite zu sehen und Fehler zu prüfen.

Wie bei 2D-Karten basiert auch die 3D-Kartenfunktion auf der Maps JavaScript API. Sie muss also zuerst geladen werden.

Das ist auf verschiedene Arten möglich. Weitere Informationen finden Sie in der Dokumentation im Abschnitt Maps JavaScript API laden.

In dieser Demonstration verwenden wir die modernere Methode „Dynamic Library Import“, da Sie damit nur die Elemente steuern können, die geladen werden müssen. So sparen Sie Downloadgröße und Startzeiten.

Dynamischen Loader hinzufügen

Wenn Sie den dynamischen Loader verwenden möchten, fügen Sie Ihrer Webseite das folgende Script-Tag hinzu und fügen Sie an der entsprechenden Stelle Ihren eigenen API-Schlüssel ein, den Sie in Schritt 2 erhalten haben. Platzieren Sie dieses Script-Tag zwischen den Body-Abschnitten der einfachen Webseite.

  <script async defer>
    (g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
      key: "YOUR_API_KEY",
      v: "alpha",
    });
  </script>

Hinweis: In dieser Phase der Produktveröffentlichung verwenden wir den Alpha-Branch der API, um auf die 3D-Karten zuzugreifen. Diese Version enthält die experimentellsten Funktionen der Produkte und ermöglicht es Ihnen, den Early-Access-Code während der Entwicklung zu testen, damit Sie ihn bei der Veröffentlichung verwenden können.

Sie sollten jetzt eine einfache Webseite mit dem dynamischen Loader haben. Wenn Sie die Seite öffnen, ist die Ansicht leer, aber es sollten keine Fehler auftreten. Wir können jetzt die 3D‑Karte hinzufügen.

Wenn Ihr Code aus irgendeinem Grund nicht funktioniert, können Sie mit Schritt 6 fortfahren und ihn mit dem Endergebnis vergleichen, um herauszufinden, was falsch ist.

Wenn Sie wissen möchten, warum die Seite möglicherweise nicht funktioniert, sehen Sie sich die Fehlerkonsole in Ihrem Browser an. Auf der Fehlerseite finden Sie eine Anleitung für verschiedene Browser. Außerdem werden verschiedene Fehlermeldungen erläutert und einige häufige Gründe genannt, warum die API möglicherweise nicht funktioniert. Dies ist eine gute Ressource, die Sie während der gesamten Entwicklung verwenden können, um herauszufinden, was bei einer Implementierung möglicherweise falsch ist.

5. Karte anzeigen

Jetzt können wir der Seite unsere erste 3D‑Karte hinzufügen.

3D-Karten werden mit der Klasse „google.maps.maps3d.Map3DElement“ erstellt. Damit können wir 3D-Karteninstanzen erstellen und bearbeiten. In diesem Codelab arbeiten wir direkt mit dem 3D‑Kartenobjekt und nicht über das HTML-Tag.

Init-Funktion erstellen und Bibliothek laden

Zuerst erstellen wir eine Funktion, die das Element auf die Seite lädt. Im Code erstellen wir zuerst eine asynchrone Funktion, mit der wir sicherstellen können, dass das gesamte Element geladen ist, bevor wir mit dem Rest des Codes fortfahren. Die Funktion init wird dann beim Laden der Seite ausgeführt.

Fügen Sie diesen Code nach dem Ladeskript im Body-Abschnitt der Seite ein.

  <script>
    async function init() {
      const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
    }
    init();
  </script>

Hinweis: Mit dem Ausdruck await wird sichergestellt, dass die Bibliothek geladen wird, bevor fortgefahren wird.

3D‑Kartenelement erstellen und Standort angeben

Als Nächstes müssen wir den Ort angeben, für den die Kartenansicht gelten soll. Für 3D-Karten gibt es eine Reihe verschiedener Parameter, mit denen Sie die Ansicht festlegen können. Das sind die Parameter der virtuellen Kamera, die beschreiben, was Sie in der Szene sehen.

Erstellen wir eine Ansicht des CN-Turms, die in etwa so aussieht.

Erste Karte, die Sie erstellen.

Zuerst müssen wir die Koordinaten angeben, die wir uns ansehen möchten. Sie bestehen aus zwei verschiedenen Ansichten:

Der Punkt, den wir uns ansehen möchten, einschließlich seiner Höhe.
Die Entfernung und Richtung der virtuellen Kamera, die auf den Punkt gerichtet ist.

Das folgende Bild veranschaulicht die Funktionsweise dieser Einstellungen.

Bild, das die Einstellungen für das Kartenelement zeigt

Der Mittelpunkt des Elements ist der Punkt, auf den Sie schauen. Der Bereich ist die Entfernung, in der Sie sich vom Objekt befinden, und die Neigung ist der Winkel, unter dem Sie das Bild betrachten. Sie können auch den Kurs und die Rollung des Objekts festlegen, wenn Sie diese ebenfalls steuern möchten. Wir verwenden diese Option hier jedoch nicht.

Jetzt erstellen wir die 3D-Karte auf der Seite. Fügen Sie der Seite nach dem Importieren der Bibliothek den folgenden Code im Abschnitt „init“ hinzu.

  const map3DElement = new Map3DElement({
      center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
      range: 1000,
      tilt: 60,
      mode: MapMode.HYBRID,
  });

  document.body.append(map3DElement);

Zuerst erstellen wir das Element und legen die entsprechenden Standortparameter fest. Anschließend fügen wir die Komponente auf der Seite hinzu. Wir können sie auch einem vorhandenen Div-Element zuweisen, falls vorhanden.

Ihr Code sollte jetzt so aussehen:

<!DOCTYPE html>
<html>

<head>
    <title>3D Maps Codelab</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script async defer>
        (g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
            key: "YOUR_API_KEY",
            v: "alpha",
        });
    </script>
    <script>
        async function init() {
            const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

            const map3DElement = new Map3DElement({
                center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
                range: 1000,
                tilt: 60,
                mode: MapMode.HYBRID
            });

            document.body.append(map3DElement);
        }

        init();
    </script>
</body>
</html>

Wir können die Datei jetzt speichern und die Seite in einem Browser öffnen, um zu sehen, ob sie funktioniert. Die Kamera sollte auf den Turm gerichtet sein, wie in der Abbildung dargestellt. Spielen Sie ein wenig herum, bevor Sie fortfahren und ein Rechteck über dem Turm hinzufügen.

Erste Karte, die Sie erstellen.

6. Elemente hinzufügen und extrudieren

Jetzt, da wir eine 3D‑Karte haben, können wir ein Objekt hervorheben, das für Nutzer von Interesse ist. In diesem Fall verwenden wir ein Polygon und die Extrusionsfunktion, um einen Quader um den CN Tower herum zu erstellen, der in etwa so aussieht wie in der folgenden Ansicht.

Eine Ansicht des Standorts mit einem extrudierten Polygon.

Unnötige Elemente ausblenden

Als Erstes fällt Ihnen vielleicht auf, dass wir die POIs deaktiviert haben. Bei dieser Karte soll der Turm im Mittelpunkt stehen. Daher müssen wir die anderen visuellen Elemente entfernen.

Dazu müssen wir den Code ändern, um die Labels auszublenden. Ändern Sie die Moduszeile der Karte in „SATELLIT“, um die Punkte auszublenden.

  mode: MapMode.SATELLITE,

Wenn Sie diese Property festlegen, werden die Labels auf der Karte deaktiviert. Das gilt nicht nur für POIs, sondern auch für Straßen- und Grenzlinien. So entsteht eine „saubere“ Ansicht des Standorts.

Polygon hinzufügen und gestalten

Im nächsten Schritt fügen Sie der Seite das Polygon hinzu. Das geht in zwei Schritten. Zuerst müssen wir die Funktionen laden, die die erforderlichen Informationen enthalten, und als Nächstes die Stildetails für das Polygon angeben, z. B. seine Farbe oder ob es hinter anderen Elementen angezeigt werden soll.

Zuerst fügen wir der Seite mit der folgenden Codezeile die erforderlichen Klassen hinzu.

  const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

Dadurch werden die Klassen Polygon3DElement und AltitudeMode auf die Seite geladen, die zum Hinzufügen eines Polygonobjekts zur Ansicht erforderlich sind.

Für ein Polygon können verschiedene Einstellungen festgelegt werden, um die Darstellung zu steuern. Dazu gehören die Strichbreite, die Farbe (entweder per Name oder Hexadezimalwert) und die Deckkraft der Begrenzungs- und Füllungseinstellungen. Außerdem kann festgelegt werden, ob das Polygon hinter anderen Elementen oder Gebäuden dargestellt werden soll, z. B. durch Zeichnen von verdeckten Segmenten. Weitere Informationen finden Sie in der Dokumentation der Klasse „Polygon3DElement“.

Die andere Einstellung, die wir vornehmen müssen, ist, dass das Polygon extrudiert gezeichnet wird. Das bedeutet, dass ein Polygon in der festgelegten Höhe gezeichnet und dann bis zum Boden erweitert wird. Dadurch erhält das Polygon eine gewisse Höhe, ähnlich wie ein Rechteck (siehe Abbildung oben). Dazu müssen wir auch den Höhenmodus für das Polygon festlegen. Deshalb mussten wir die AltitudeMode-Konstanten oben laden. Wenn Sie ein Polygon extrudieren möchten, muss diese Option entweder auf ABSOLUTE oder RELATIVE_TO_GROUND festgelegt sein, damit die richtige Position aus den Höhen an den Polygonpunkten ermittelt werden kann.

Der Code erstellt ein Literalobjekt mit diesen Eigenschaften, das dann zum Erstellen des Polygon3DElement-Objekts verwendet werden kann, wie hier gezeigt:

  const polygonOptions = {
    strokeColor: "#EA433580",
    strokeWidth: 4,
    fillColor: "#0000FF80",
    altitudeMode: "ABSOLUTE",
    extruded: true,
    drawsOccludedSegments: true,
  }

  const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);

Jetzt haben wir das Polygonobjekt erstellt und müssen auch seine geografischen Koordinaten festlegen. Je nach Darstellung können Polygone sowohl innere als auch äußere Koordinaten haben. innerCoordinates gibt die Form von Ausschnitten innerhalb des Polygons an und outerCoordinates definiert die äußere Begrenzung des Polygons. Da es sich um ein Polygon und nicht um eine Linie handelt, müssen die Koordinaten am selben Punkt beginnen und enden, um eine vollständige Form zu ergeben.

Sie können die Koordinaten mit einem Array von LatLng- oder LatLngAltitude-Objekten oder -Literalen angeben. Das sehen wir an unserem einfachen Polygon.

  towerPolygon.outerCoordinates = [
    { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
    { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
    { lat: 43.643001, lng: -79.3866475, altitude: 600 },
    { lat: 43.6427196, lng: -79.3876802, altitude: 600 }
  ];

Nachdem wir das Styling und die Koordinaten für das Polygon festgelegt haben, können wir es der Seite hinzufügen. Polygone sind untergeordnete Elemente des Kartenelements und müssen einem vorhandenen Kartenobjekt auf der Seite hinzugefügt werden. Fügen Sie den folgenden Code auf der Seite ein.

  map3DElement.append(towerPolygon);

Sobald wir das haben, sollte die folgende vollständige Implementierung wie hier gezeigt vorliegen (außer dass sie Ihren eigenen API-Schlüssel enthält). Wir können die Seite jetzt ausführen und das Ergebnis sehen.

<!DOCTYPE html>
<html>

<head>
    <title>3D Maps Codelab</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script async defer>
        (g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
            key: "YOUR_API_KEY",
            v: "alpha",
        });
    </script>
    <script>
        async function init() {
            const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

            const map3DElement = new Map3DElement({
                center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
                range: 1000,
                tilt: 60,
                mode: MapMode.SATELLITE,
            });

            const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");

            const polygonOptions = {
                strokeColor: "#EA433580",
                strokeWidth: 4,
                fillColor: "#0000FF80",
                fillOpacity: 0.2,
                altitudeMode: "ABSOLUTE",
                extruded: true,
                drawsOccludedSegments: true,
            }

            const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);

            towerPolygon.outerCoordinates = [
                { lat: 43.6427196, lng: -79.3876802, altitude: 600 },
                { lat: 43.6421742, lng: -79.3869184, altitude: 600 },
                { lat: 43.643001, lng: -79.3866475, altitude: 600 },
                { lat: 43.6427196, lng: -79.3876802, altitude: 600 }
            ];

            map3DElement.append(towerPolygon);

            document.body.append(map3DElement);
        }
        
        init();
    </script>

</body>
</html>

Wenn der Code korrekt ist, sollte eine Seite mit der folgenden 3D-Karte und dem Polygon angezeigt werden.

Die Ansicht, die Sie sehen sollten, wenn Ihr Code fertig ist.

Sie haben Ihre erste 3D‑Karte mit der Google Maps Platform erstellt. Dazu haben Sie die Maps JavaScript API geladen, eine 3D‑Karte erstellt und ein extrudiertes Polygon hinzugefügt.

7. Nächste Schritte

In diesem Codelab haben Sie die Grundlagen der Maps JavaScript API kennengelernt. Fügen Sie der Karte als Nächstes einige dieser Elemente hinzu:

Fügen Sie eine Schaltfläche hinzu, mit der Sie die POIs ein- und ausschalten können.
Fügen Sie einige Linien hinzu, die eine Route zu und von verschiedenen Orten anzeigen.
Legen Sie einige Grenzbeschränkungen fest, um zu steuern, wohin der Nutzer die Ansicht verschieben kann.
Sehen Sie sich die zusätzlichen Bibliotheken an, die für die Maps JavaScript API verfügbar sind und zusätzliche Dienste wie „Places“ oder „Wegbeschreibungen“ ermöglichen.

Unter den folgenden Links finden Sie weitere Informationen zur Arbeit mit der Google Maps Platform und 3D im Web:

Erste fotorealistische 3D-Karte erstellen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

1. Hinweis

Was Sie erstellen werden

Lerninhalte

2. Vorbereitung

Erforderliche Google Maps Platform-Produkte

Weitere Anforderungen für dieses Codelab

3. Einrichten

Google Maps Platform einrichten

4. Maps JavaScript API laden

Erstellen Sie die einfachste Webseite, die Sie sich vorstellen können.

Dynamischen Loader hinzufügen

5. Karte anzeigen

Init-Funktion erstellen und Bibliothek laden

3D‑Kartenelement erstellen und Standort angeben

6. Elemente hinzufügen und extrudieren

Unnötige Elemente ausblenden

Polygon hinzufügen und gestalten

7. Nächste Schritte

Erste fotorealistische 3D-Karte erstellen