Mappe vettoriali

L'API Maps JavaScript offre due diverse implementazioni della mappa: raster e il vettore. La mappa raster viene caricata per impostazione predefinita e viene caricata come griglia di riquadri di immagini raster basati su pixel, generati da Google Maps Platform lato server, quindi pubblicati nella 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 computer dispositivo per il rendering di grafica 2D e 3D.

La mappa vettoriale è la stessa mappa Google con cui gli utenti hanno familiarità e Offre numerosi vantaggi rispetto alla mappa di riquadri raster predefinita, in particolare la nitidezza delle immagini vettoriali e l'aggiunta di edifici 3D a distanza ravvicinata livelli di zoom. 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 controllo dell'intestazione, controllo avanzato della fotocamera e zoom frazionario per una maggiore fluidità eseguire lo zoom.

Inizia a utilizzare le mappe vettoriali

Controllare la videocamera

Usa la funzione map.moveCamera() per aggiornare qualsiasi combinazione di fotocamera proprietà contemporaneamente. 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 fotocamera chiamando map.moveCamera() con un loop dell'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. anziché i numeri interi. Mentre le mappe raster e vettoriali supportano i dati frazionari, lo zoom frazionario è attivo per impostazione predefinita per le mappe vettoriali e disattivato per impostazione predefinita per mappe raster. Utilizza l'opzione mappa isFractionalZoomEnabled per attivare le funzioni frazionarie e aumentare o diminuire lo zoom.

Il seguente esempio 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 il valore isFractionalZoomEnabled opzione di mappa 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; questo è particolarmente utile se non hai impostato esplicitamente isFractionalZoomEnabled su true o false. Il codice di esempio seguente verifica 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');
  }
});