Controlli ed esplorazione delle mappe 3D

Panoramica dei controlli

Le mappe visualizzate tramite le mappe 3D fotorealistiche nell'API Maps JavaScript contengono elementi dell'interfaccia utente per supportare l'interazione dell'utente con la mappa. Questi elementi sono noti come controlli e puoi scegliere se includerli o meno nell'interfaccia utente. Se elimini i controlli dell'interfaccia utente, l'utente può comunque spostarsi sulla mappa utilizzando le scorciatoie da tastiera.

Le mappe 3D fotorealistiche nell'API Maps JavaScript supportano anche la guida degli utenti nella mappa utilizzando percorsi della fotocamera preimpostati. Questi percorsi possono essere personalizzati e combinati per creare esperienze 3D ricche.

Controlli di esplorazione

L'immagine seguente mostra l'insieme predefinito di controlli visualizzati dalle mappe 3D fotorealistiche nell'API Maps JavaScript:

Immagine di una mappa con i controlli presenti

Di seguito è riportato l'elenco completo dei controlli nelle mappe 3D fotorealistiche in JavaScript di Maps:

  • Il controllo zoom mostra i pulsanti "+" e "-" per modificare il livello di zoom della mappa.
  • Il controllo inclinazione ti consente di modificare l'inclinazione della fotocamera.
  • Il controllo di rotazione ti consente di modificare l'orientamento della fotocamera.
  • Il controllo di spostamento mostra i pulsanti "←", "→", "↑" e "↓" per cambiare il centro della mappa.

Il seguente esempio di codice mostra come attivare/disattivare i controlli di esplorazione:

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIDisabled: true,
});

HTML

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

Preset dei percorsi della fotocamera

Le mappe 3D fotorealistiche in Maps JavaScript forniscono due percorsi della fotocamera preimpostati. I percorsi della videocamera possono essere personalizzati modificando la durata dell'animazione (aumentando o diminuendo la velocità) o combinandoli per creare esperienze più cinematografiche.

Le mappe 3D fotorealistiche in Maps JavaScript supportano i seguenti percorsi della fotocamera:

  • L'animazione di flyCameraTo vola dal centro della mappa a una destinazione specificata.
  • L'animazione flyCameraAround ruota attorno a un punto sulla mappa per il numero di volte specificato.

I due percorsi disponibili possono essere combinati per volare fino a un punto d'interesse, ruotarvi attorno e poi fermarsi quando specificato.

Vai su

Il seguente esempio di codice mostra l'animazione della videocamera che si sposta in una località:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Vola

Il seguente esempio di codice mostra l'animazione della videocamera che vola sopra una località:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    rounds: 1
  });
}

Combinare animazioni

Il seguente esempio di codice mostra come combinare le animazioni per far volare la fotocamera fino a un punto e poi ruotare attorno al punto alla fine della prima animazione:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

Passaggi successivi