Panoramica

Seleziona la piattaforma: Android iOS JavaScript

3D Maps in Maps JavaScript ti aiuta a creare esperienze immersive con le mappe 3D. Fornisce strumenti per personalizzare lo stile delle mappe, migliorare l'accessibilità e l'usabilità, consentendo lo sviluppo di applicazioni coinvolgenti e interattive.

Ecco un esempio di ciò che puoi fare con le mappe 3D nell'API Maps JavaScript:

Perché utilizzare le mappe 3D in Maps JavaScript

Le mappe 3D in Maps JavaScript forniscono la classe Map3DElement (<gmp-map-3d>) nella libreria maps3d per consentirti di utilizzare le immagini 3D di Google nelle tue applicazioni. Le mappe 3D offrono un'esperienza di rendering 3D integrata, che ti consente di incorporare o sperimentare ambienti 3D reali, viste della città e tour dei punti di riferimento.

Utilizza 3D <gmp-map-3d> (Map3DElement nella libreria maps3d) per il rilievo 3D, l'inclinazione della fotocamera, l'orientamento e i sorvoli dell'intervallo, gli edifici in 3D estrusi e gli oggetti 3D come Marker3DElement (<gmp-marker-3d>). Per le mappe stradali 2D piatte, i segnaposto 2D AdvancedMarkerElement Standard e lo stile vettoriale 2D, utilizza 2D <gmp-map> (MapElement o google.maps.Map nella libreria maps).

Cosa puoi fare con 3D Maps in Maps JavaScript?

• Crea esperienze di mappe del mondo reale: esegui il rendering di immagini aeree 3D fotorealistiche di città, terreni e punti di riferimento in modalità SATELLITE o HYBRID (che sovrappone le etichette della mappa base alle immagini satellitari) oppure visualizza una mappa base 3D personalizzata in modalità ROADMAP utilizzando la proprietà mode. Per saperne di più, consulta Cambia la modalità mappa.
• Personalizza lo stile della mappa:
  • Stile delle mappe 3D basato su cloud: controlla la visibilità e lo stile dei punti d'interesse (PDI) e delle strade della mappa base. Per saperne di più, consulta Personalizza le mappe 3D.
  • Indicatori, popover, polilinee e poligoni personalizzati: identifica le posizioni e disegna percorsi o confini 3D sulla mappa utilizzando MarkerElement, Marker3DElement, Marker3DInteractiveElement, PopoverElement, Polyline3DElement e Polygon3DElement. Per saperne di più, consulta Indicatori, Popover e Forme e linee.
  • Modelli 3D e asset glTF: aggiungi modelli 3D glTF PBR personalizzati di edifici, punti di riferimento o oggetti alle coordinate reali utilizzando Model3DElement. Per saperne di più, consulta Modelli.
• Crea mappe immersive:
  • Percorsi della fotocamera preimpostati: guida gli utenti attraverso la mappa 3D con sorvoli della fotocamera e animazioni orbitali predefiniti utilizzando flyCameraTo e flyCameraAround. Per ulteriori informazioni, consulta Animare i percorsi della videocamera.
  • Controlla l'interazione dell'utente: personalizza i controlli e il movimento della videocamera disponibili per gli utenti. Per saperne di più, consulta Controlli ed esplorazione delle mappe 3D, Limita la visuale e i limiti della fotocamera e Controlla la posizione della fotocamera.

Esempio rapido

Per caricare la libreria maps3d ed eseguire il rendering di un elemento <gmp-map-3d> con mode="HYBRID", center (lat,lng,altitude), range, tilt e heading, utilizza il seguente 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>

Sostituisci YOUR_API_KEY con la tua chiave API Google Maps Platform.

Come utilizzare le mappe 3D in Maps JavaScript

1	Configurazione	Inizia con Configura l'API JavaScript e completa le istruzioni di configurazione riportate di seguito.
2	Scopri come viene fatturata l'API Maps JavaScript	Per informazioni, consulta Utilizzo e fatturazione.
3	Crea una mappa	Per saperne di più, consulta Inizia.

Copertura

Le mesh di edifici in 3D e punti di riferimento fotorealistici sono disponibili in alcune aree metropolitane dei paesi e delle regioni supportati. Nelle regioni senza copertura mesh 3D (come l'India), <gmp-map-3d> esegue il rendering di immagini satellitari o della mappa stradale 2D sovrapposte all'altitudine del terreno 3D senza edifici in 3D estrusi. Per mostrare un punto di riferimento in un'area senza copertura mesh 3D, puoi posizionare un modello 3D glTF personalizzato alle sue coordinate utilizzando Model3DElement o un <gmp-map> 2D. Per la disponibilità paese per paese (nella colonna Maps JavaScript 3D), consulta i dettagli sulla copertura di Google Maps Platform.

Passaggi successivi

• Consulta la guida Inizia per creare un'applicazione "Hello, World!" Mappa 3D.
• Prova il codelab introduttivo per scoprire come aggiungere elementi alla mappa.
• Amplia le tue conoscenze su indicatori e animazioni nel prossimo codelab.
• Sfoglia la raccolta di esempi di Google per trovare quello più adatto al tuo caso d'uso.