Mappe vettoriali

L'API Maps JavaScript offre due diverse implementazioni della mappa: raster e vettoriale. La mappa raster viene caricata per impostazione predefinita e la carica sotto forma di griglia di riquadri di immagini raster basati su pixel, che vengono generati dal lato server di Google Maps Platform e poi pubblicati nell'app web. La mappa vettoriale è composta da riquadri vettoriali che vengono disegnati sul lato client al momento del caricamento tramite WebGL, una tecnologia web che consente al browser di accedere alla GPU sul dispositivo 2D dell'utente e al rendering 3D.

La mappa vettoriale è la stessa mappa Google che i tuoi utenti conoscono e offre una serie di vantaggi rispetto alla mappa di riquadri raster predefinita, in particolare la nitidezza delle immagini vettoriali e l'aggiunta di edifici 3D a livelli di zoom ravvicinati. La mappa vettoriale supporta anche alcune nuove funzionalità, come la possibilità di aggiungere contenuti 3D con la visualizzazione overlay WebGL, l'inclinazione programmatica e il controllo di orientamento, il controllo avanzato della videocamera e lo zoom frazionario per uno zoom più fluido.

Iniziare a utilizzare le mappe vettoriali

Controlla 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 fotocamera da aggiornare. L'esempio seguente mostra la chiamata a 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 fotocamera chiamando map.moveCamera() con un loop di animazione, come mostrato qui:

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 consente di eseguire lo zoom utilizzando valori frazionari invece di numeri interi. Sebbene le mappe raster e vettoriali supportino lo zoom frazionario, lo zoom frazionario è attivo per impostazione predefinita per le mappe vettoriali e disattivato per impostazione predefinita per le mappe raster. Usa l'opzione isFractionalZoomEnabled della mappa per attivare e disattivare lo zoom frazionario.

L'esempio seguente mostra l'attivazione dello 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 della mappa isFractionalZoomEnabled, come mostrato qui:

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

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

Puoi impostare un listener per rilevare se lo zoom frazionario è attivato; ciò è più utile se non hai impostato esplicitamente isFractionalZoomEnabled su true o false. Il codice di esempio seguente controlla se lo zoom frazionario è abilitato:

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