Mappe vettoriali

L'API Maps JavaScript offre due diverse implementazioni della mappa: raster e vettoriali. La mappa raster viene caricata per impostazione predefinita e caricala come una griglia di riquadri di immagini raster basati su pixel, generati da Google Maps Platform sul lato server e poi pubblicati sulla tua app web. La mappa vettoriale è composta da riquadri basati su vettori, che vengono disegnati al momento del caricamento sul lato client utilizzando WebGL, una tecnologia web che consente al browser di accedere alla GPU sul dispositivo dell'utente per visualizzare grafica 2D e 2D.

La mappa vettoriale è la stessa che i tuoi utenti conoscono già e offre una serie di vantaggi rispetto alla mappa a mosaico raster predefinita, in particolare la nitidezza delle immagini basate su vettori 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 sovrapposta di WebGL, l'inclinazione programmatica e il controllo dell'intestazione, il controllo migliorato della fotocamera e lo zoom frazionario per uno zoom più fluido.

Inizia a utilizzare Vector Maps

Controlla la videocamera

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

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 eseguire lo zoom utilizzando valori frazionari invece di numeri interi. Mentre le mappe raster e vettoriali supportano lo zoom frazionario, lo zoom frazionario è attivo per impostazione predefinita per le mappe vettoriali e disattivato per impostazione predefinita per le mappe radar. Utilizza 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 attivare e disattivare lo zoom frazionario impostando anche l'opzione isFractionalZoomEnabled sulla mappa, come mostrato di seguito:

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

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

Puoi impostare un listener per rilevare se lo zoom frazionario è attivo. Questa opzione è utile se non hai impostato esplicitamente isFractionalZoomEnabled su true o false. Il seguente codice di esempio verifica se lo zoom frazionario è attivato:

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