Tipo di rendering (raster e vettoriale)

L'API Maps JavaScript offre due diverse implementazioni della mappa: raster e vettoriale. La mappa raster viene caricata per impostazione predefinita e viene caricata come una griglia di tessere di immagini raster basate su pixel, che vengono generate da Google Maps Platform lato server e poi inviate alla tua app web. La mappa vettoriale è composta da tessere basate su vettori, che vengono disegnate al momento del caricamento lato client utilizzando WebGL, una tecnologia web che consente al browser di accedere alla GPU sul dispositivo dell'utente per eseguire il rendering di grafica 2D e 3D. Il tipo di mappa vettoriale è consigliato per un'esperienza utente ottimale, in quanto offre una fedeltà visiva migliorata, nonché la possibilità di controllare l'inclinazione e la direzione sulla mappa. Scopri di più sulle funzionalità delle mappe vettoriali.

Imposta il tipo di rendering per una mappa specificando l'opzione mappa renderingType o impostando l'opzione su un ID mappa associato. L'opzione renderingType sostituisce qualsiasi impostazione del tipo di rendering effettuata configurando un ID mappa.

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). Per le mappe caricate utilizzando un elemento div e JavaScript, il tipo di rendering predefinito è google.maps.RenderingType.RASTER. Per impostare l'opzione renderingType:

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

    const { Map, RenderingType } = await google.maps.importLibrary("maps");
  2. Quando esegui l'inizializzazione della mappa, utilizza l'opzione renderingType per specificare RenderingType.VECTOR o RenderingType.RASTER:

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

Quando il tipo di rendering della mappa vettoriale è impostato, devi impostare le opzioni per le funzionalità necessarie.

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

Per le mappe caricate utilizzando l'elemento <gmp-map>, il tipo di rendering predefinito è google.maps.RenderingType.VECTOR, con il controllo dell'inclinazione e dell'orientamento abilitato. Per impostare il tipo di rendering utilizzando l'elemento <gmp-map>, utilizza l'attributo rendering-type.

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 un'opzione (Vettore o Raster). Seleziona Inclinazione e Rotazione per attivare l'inclinazione e la rotazione sulla mappa. In questo modo potrai regolare 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.

Crea ID mappa vettoriale

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 la 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'
});