Übersicht

Mit 3D-Karten in Maps JavaScript können Sie immersive 3D-Karten erstellen. Sie bietet Tools zum Anpassen des Kartenstils, zum Verbessern der Barrierefreiheit und zum Erhöhen der Nutzerfreundlichkeit, sodass ansprechende und interaktive Anwendungen entwickelt werden können.

Hier ein Beispiel für die Möglichkeiten, die 3D-Karten in der Maps JavaScript API bieten:

Vorteile von 3D Maps in Maps JavaScript

3D-Karten in der Maps JavaScript API bieten die Klasse Map3DElement (<gmp-map-3d>) in der Bibliothek maps3d, damit Sie 3D-Bilder von Google in Ihren Anwendungen verwenden können. 3D-Karten bieten integriertes 3D-Rendering, sodass Sie 3D-Umgebungen, Stadtansichten und Touren zu Sehenswürdigkeiten einbinden oder damit experimentieren können.

Verwenden Sie 3D-<gmp-map-3d> (Map3DElement in der maps3d-Bibliothek) für 3D-Gelände, Kameraneigung, Richtung und Bereichsüberflüge, extrudierte 3D-Gebäude und 3D-Objekte wie Marker3DElement (<gmp-marker-3d>). Für flache 2D-Straßenkarten, standardmäßige 2D-AdvancedMarkerElement-Pins und 2D-Vektorstile verwenden Sie 2D-<gmp-map> (MapElement oder google.maps.Map in der maps-Bibliothek).

Was können Sie mit 3D-Karten in Maps JavaScript tun?

• Realistische Kartendarstellungen erstellen: Sie können fotorealistische 3D-Luftaufnahmen von Städten, Gelände und Sehenswürdigkeiten im Modus SATELLITE oder HYBRID rendern (wobei Basiskartenlabels über Satellitenbilder gelegt werden) oder eine gestaltete 3D-Basiskarte im Modus ROADMAP mit der Property mode anzeigen. Weitere Informationen finden Sie unter Kartenmodus ändern.
• Kartenstil anpassen:
  • Cloudbasiertes Gestalten von 3D-Karteninhalten: Steuern Sie die Sichtbarkeit und das Gestalten von POIs und Straßen auf der Basiskarte. Weitere Informationen finden Sie unter 3D-Karten anpassen.
  • Benutzerdefinierte Markierungen, Pop-over, Polylinien und Polygone: Mit MarkerElement, Marker3DElement, Marker3DInteractiveElement, PopoverElement, Polyline3DElement und Polygon3DElement können Sie Orte identifizieren und 3D-Routen oder ‑Grenzen auf der Karte einzeichnen. Weitere Informationen finden Sie unter Markierungen, Pop-over und Formen und Linien.
  • 3D-Modelle und glTF-Assets: Mit Model3DElement können Sie benutzerdefinierte PBR-glTF-3D-Modelle von Gebäuden, Sehenswürdigkeiten oder Objekten an realen Koordinaten hinzufügen. Weitere Informationen finden Sie unter Modelle.
• Immersive Karten erstellen:
  • Voreingestellte Kamerapfade: Mit flyCameraTo und flyCameraAround können Sie Nutzer mit vordefinierten Kameraüberflügen und Orbitalanimationen durch Ihre 3D-Karte führen. Weitere Informationen finden Sie unter Kamerapfade animieren.
  • Nutzerinteraktion steuern: Passen Sie die Steuerelemente und Kamerabewegungen an, die für Ihre Nutzer verfügbar sind. Weitere Informationen finden Sie unter Steuerung und Erkundung von 3D-Karten, Kameraansicht und -grenzen einschränken und Kameraposition steuern.

Kurzes Beispiel

Wenn Sie die maps3d-Bibliothek laden und ein <gmp-map-3d>-Element mit mode="HYBRID", center (lat,lng,altitude), range, tilt und heading rendern möchten, verwenden Sie das folgende Snippet:

<gmp-map-3d
  style="height: 400px; width: 100%;"
  mode="HYBRID"
  center="40.7484,-73.9857,200"
  range="900"
  tilt="67"
  heading="35">
</gmp-map-3d>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>

Ersetzen Sie YOUR_API_KEY durch Ihren Google Maps Platform-API-Schlüssel.

3D-Karten in Maps JavaScript verwenden

Abdeckung

Fotorealistische 3D-Gebäude- und Sehenswürdigkeiten-Meshes sind in ausgewählten Ballungsräumen in unterstützten Ländern und Regionen verfügbar. In Regionen ohne 3D-Mesh-Abdeckung (z. B. Indien) rendert <gmp-map-3d> 2D-Satelliten- oder Straßenkartenbilder, die über 3D-Geländehöhen gelegt werden, ohne extrudierte 3D-Gebäude. Wenn Sie eine Sehenswürdigkeit in einem Gebiet ohne 3D-Mesh-Abdeckung präsentieren möchten, können Sie mit Model3DElement ein benutzerdefiniertes glTF-3D-Modell an den entsprechenden Koordinaten platzieren oder eine 2D-<gmp-map> verwenden. Informationen zur Verfügbarkeit nach Land (in der Spalte Maps JavaScript 3D) finden Sie unter Details zur Google Maps Platform-Abdeckung.

Nächste Schritte

• Gehen Sie den Startleitfaden durch, um eine „Hello World!“-3D-Karte zu erstellen.
• Im Einführungs-Codelab erfahren Sie, wie Sie der Karte Elemente hinzufügen.
• Im nächsten Codelab können Sie Ihr Wissen über Markierungen und Animationen erweitern.
• Sehen Sie sich die Google-Sammlung von Beispielen an und wählen Sie eines aus, das sich für Ihren Anwendungsfall eignet.