Mappe vettoriali

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.

La mappa vettoriale è la stessa mappa di Google che gli utenti conoscono e offre una serie di vantaggi rispetto alla mappa di riquadri raster predefinita, in particolare la nitidezza delle immagini basate su vettori e l'aggiunta di edifici 3D a livelli di zoom elevati. La mappa vettoriale supporta anche alcune nuove funzionalità, come la possibilità di aggiungere contenuti 3D con la visualizzazione sovrapposta di WebGL, il controllo programmatico dell'inclinazione e dell'orientamento, il controllo avanzato della fotocamera e lo zoom frazionario per uno zoom più fluido.

Guida introduttiva alle mappe vettoriali

Controllare la videocamera

Utilizza la funzione map.moveCamera() per aggiornare contemporaneamente qualsiasi combinazione di proprietà della videocamera. map.moveCamera() accetta un singolo parametro contenente tutte le proprietà della videocamera da aggiornare. L'esempio seguente mostra la chiamata map.moveCamera() per impostare center, zoom, heading e tilt contemporaneamente:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

Puoi animare le proprietà della videocamera chiamando map.moveCamera() con un loop di animazione, come mostrato di seguito:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

Zoom frazionario

Le mappe vettoriali supportano lo zoom frazionario, che ti consente di aumentare lo zoom utilizzando valori frazionari anziché interi. Sebbene sia le mappe raster che quelle vettoriali supportino lo zoom frazionario, quest'ultimo è attivo per impostazione predefinita per le mappe vettoriali e disattivato per le mappe raster. Utilizza l'opzione della mappa isFractionalZoomEnabled per attivare e disattivare lo zoom frazionario.

L'esempio seguente mostra come attivare lo zoom frazionario durante l'inizializzazione della mappa:

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

Puoi anche attivare e disattivare lo zoom frazionario impostando l'opzione mappa isFractionalZoomEnabled come mostrato di seguito:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

Puoi impostare un ascoltatore per rilevare se lo zoom frazionario è attivo. Questa funzionalità è più utile se non hai impostato esplicitamente isFractionalZoomEnabled su true o false. Il seguente codice di esempio verifica se lo zoom frazionario è attivo:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});