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 carica la mappa come una griglia di riquadri di immagini raster basati 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 un'esperienza utente ottimale, in quanto offre una migliore fedeltà visiva e 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 renderingType della mappa 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. 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 è 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 della visualizzazione, 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. Per creare un nuovo ID mappa, segui i passaggi descritti in Utilizzo della personalizzazione basata su cloud: ottieni 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 consentire agli utenti di 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 mappe. 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'
});