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 ti consente di aggiungere grafica 2D e 3D personalizzata e contenuti animati alle tue mappe.
• L'inclinazione e l'orientamento possono ora essere regolate a livello programmatico e utilizzando i gesti del mouse e della tastiera
• map.moveCamera() ti consente di modificare contemporaneamente più proprietà della fotocamera.
• Lo zoom ora supporta valori frazionari.

Inizia

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

Specificare 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. Questa operazione può essere eseguita durante il caricamento della libreria Maps:

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

2. Quando inizializzi la 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 della mappa tiltInteractionEnabled su true o chiama map.setTiltInteractionEnabled.
• Per attivare la panoramica, imposta l'opzione della 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 Vettoriale. Seleziona Inclinazione o Rotazione per attivare l'inclinazione e la rotazione sulla mappa. In questo modo, puoi regolare questi valori a livello di programmazione e consentire agli utenti di regolare l'inclinazione e l'orientamento direttamente sulla mappa. Se l'utilizzo 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 crei un'istanza della mappa 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'
});

Utilizzare l'elemento <gmp-map>

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

Esempi

Sono stati forniti esempi per illustrare queste funzionalità:

• Visualizzazione sovrapposta WebGL
• Inclinazione e rotazione WebGL
• Tour delle funzionalità WebGL
• Demo dell'app di viaggio WebGL