Tipo di rendering (raster e vettoriale)

L'API Maps JavaScript offre due diverse implementazioni della mappa: raster e vettoriale. La mappa raster carica la mappa come una griglia di riquadri di immagini raster basate su pixel, che vengono generati lato server da Google Maps Platform e poi pubblicati nella tua app web. La mappa vettoriale è composta da riquadri basati su vettori, che vengono disegnati al momento del caricamento lato client utilizzando WebGL, una tecnologia web che consente al browser di accedere alla GPU sul dispositivo dell'utente per il rendering di grafiche 2D e 3D.

Il tipo di mappa vettoriale è consigliato per la migliore esperienza utente, in quanto offre una fedeltà visiva migliorata, una migliore memorizzazione nella cache delle mappe e la possibilità di controllare l'inclinazione e la direzione sulla mappa. Scopri di più sulle funzionalità delle mappe vettoriali.

Tipo di rendering predefinito

Il tipo di rendering predefinito della mappa varia a seconda dell'implementazione.

  • Le mappe che utilizzano l'elemento <gmp-map> hanno come impostazione predefinita il tipo di rendering vettoriale.

  • Le mappe che utilizzano un elemento <div> con google.maps.Map impostato come predefinito utilizzano il tipo di rendering raster.

Imposta il tipo di rendering per una mappa specificando l'opzione renderingType map 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 tua 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. Segui questi passaggi per impostare l'opzione renderingType:

  1. Carica la libreria RenderingType. Questa operazione può essere eseguita durante il caricamento della libreria Maps:

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

  2. Quando inizializzi la 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 viene impostato il tipo di rendering della mappa vettoriale, 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 lo spostamento panoramico, imposta l'opzione della mappa headingInteractionEnabled su true o chiama il numero 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 della direzione 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. Crea un ID mappa seguendo 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 (Vettoriale o Raster). Seleziona Inclinazione e Rotazione per attivare l'inclinazione e la rotazione sulla mappa. In questo modo, potrai modificare questi valori a livello di programmazione e gli utenti potranno regolare l'inclinazione e la direzione direttamente sulla mappa. Se l'utilizzo dell'inclinazione o della direzione influirà negativamente sulla tua app, lascia le caselle Inclinazione e Rotazione deselezionate in modo che gli utenti non possano regolare l'inclinazione e la rotazione.

Crea ID mappa vettoriale

Poi, aggiorna il codice di inizializzazione della mappa con l'ID mappa che hai creato. Puoi trovare i tuoi ID mappa nella pagina Gestione mappa. Fornisci un ID mappa quando la istanzi utilizzando la proprietà mapId come mostrato qui:

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

Rilevare il tipo di rendering in uso

Per rilevare il tipo di rendering utilizzato, chiama getRenderingType() sull'oggetto mappa, come mostrato nell'esempio seguente:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```