Controllare la posizione della videocamera

Nelle mappe 3D dell'API Maps JavaScript, gestisci la messa a fuoco della videocamera utilizzando l'opzione cameraPosition.

Comportamenti chiave:

  • Con center: le coordinate di latitudine e longitudine specificano il punto esatto sulla mappa verso cui è rivolta la videocamera.
  • Con cameraPosition: la videocamera stessa è posizionata alle coordinate fornite durante la costruzione. In questo modo è spesso difficile centrare la visualizzazione su un punto d'interesse specifico.

L'esempio seguente mostra l'inizializzazione di una mappa utilizzando l'opzione center per garantire un punto focale specifico. Il marcatore indica il punto centrale fornito in center:

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=weekly&libraries=maps3d"></script>
    </body>
</html>
index.html

Visualizza il codice sorgente dell'esempio completo

CSS

gmp-map-3d {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=weekly&libraries=maps3d"></script>
    </body>
</html>
index.html

Prova campione

Campo visivo e raggio di copertura

Puoi regolare la quantità di mappa visibile nel riquadro di visualizzazione utilizzando due parametri distinti: range e fov. Sebbene entrambi influiscano sul livello di "zoom", funzionano in modo diverso:

  • range: controlla la distanza fisica tra la videocamera e il punto centrale. La regolazione equivale ad avvicinare o allontanare la videocamera dalla mappa.

  • fov (campo visivo): controlla l'angolazione dell'obiettivo della videocamera. Un valore più alto funge da obiettivo grandangolare, mostrando una porzione più ampia della periferia, mentre un valore più basso funge da teleobiettivo.

Il seguente confronto mostra la stessa mappa alle estremità opposte dello spettro fov. Nella mappa a sinistra, il campo visivo è impostato su 5 (stretto/teleobiettivo); nella mappa a destra, è impostato su 80 (grandangolo).

Un confronto fianco a fianco tra due rendering aerei 3D del Golden Gate Bridge. Il lato sinistro mostra un&#39;ampia visuale a volo d&#39;uccello dell&#39;intera campata del ponte e delle Marin Headlands. Il lato destro mostra un primo piano estremo di una torre di sospensione rossa e del piano del ponte con un angolo di inclinazione verso il basso.