Panoramica

Le funzionalità basate su WebGL per l'API Maps JavaScript ti consentono di controllare l'inclinazione e la rotazione, aggiungere oggetti 3D direttamente alla mappa e altro ancora. Sono incluse le seguenti funzionalità:

• La visualizzazione sovrapposta WebGL consente di aggiungere alle mappe contenuti animati e grafici 2D e 3D personalizzati.
• Inclinazione e rotta ora possono essere regolati tramite codice e utilizzando i gesti del mouse e della tastiera.
• map.moveCamera() consente di modificare contemporaneamente più proprietà della fotocamera.
• Zoom ora supporta i valori frazionari.

Inizia

Per utilizzare le nuove funzionalità WebGL, devi utilizzare una mappa vettoriale. Questa sezione ti spiega come.

Specifica l'opzione renderingType

Utilizza l'opzione renderingType per specificare il tipo di rendering raster o vettoriale per la mappa (non è richiesto alcun ID mappa):

1. Carica la libreria RenderingType, ad esempio quando carichi la libreria Maps:

   const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
   

2. Quando esegui l'inizializzazione della mappa, utilizza l'opzione renderingType per specificare RenderingType.VECTOR o RenderingType.RASTER:

   map = new Map(
     document.getElementById('map') as HTMLElement,
     {
       zoom: 4,
       center: position,
       renderingType: RenderingType.VECTOR,
     }
   );
   

L'opzione renderingType sostituisce qualsiasi impostazione del tipo di rendering effettuata configurando un ID mappa.

• Per attivare l'inclinazione e la rotazione, imposta l'opzione mappa tiltInteractionEnabled su true o chiama map.setTiltInteractionEnabled.
• Per attivare la panoramica, imposta l'opzione mappa headingInteractionEnabled su true o chiama map.setHeadingInteractionEnabled.

Utilizzare un ID mappa per impostare il tipo di rendering

Puoi anche specificare il tipo di rendering utilizzando un ID mappa. Per creare un nuovo ID mappa, segui i passaggi descritti in Utilizzare la personalizzazione delle mappe basata su cloud: ottenere un ID mappa. Assicurati di impostare il tipo di mappa su JavaScript e seleziona l'opzione Vettore. Seleziona Inclinazione e/o Rotazione per attivare l'inclinazione e la rotazione sulla mappa. In questo modo potrai modificare questi valori in modo programmatico e gli utenti potranno regolare l'inclinazione e l'orientamento direttamente sulla mappa. Se l'uso dell'inclinazione o dell'orientamento influisce negativamente sulla tua app, lascia deselezionate le opzioni Inclinazione e Rotazione in modo che gli utenti non possano regolare l'inclinazione e la rotazione.

Aggiorna il codice di inizializzazione della mappa con l'ID mappa che hai creato. Puoi trovare gli ID mappa nella pagina Gestione mappa. Fornisci un ID mappa quando ne esegui l'inizializzazione utilizzando la proprietà mapId come mostrato di seguito:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

Importante: ti consigliamo di associare l'ID mappa e la chiave API allo stesso progetto della console Google Cloud.

Utilizzare l'elemento <gmp-map>

Le mappe vettoriali, l'inclinazione e l'orientamento sono abilitati per impostazione predefinita quando utilizzi l'elemento <gmp-map>, che ti consente di aggiungere una mappa alla tua pagina utilizzando HTML. Scopri di più.

Esempi

Sono stati forniti esempi per dimostrare queste funzionalità:

• Visualizzazione sovrapposta WebGL
• Inclinazione e rotazione WebGL
• Tour delle funzionalità di WebGL
• Demo di app di viaggi WebGL