Controlar la posición de la cámara

En los mapas en 3D de la API de Maps JavaScript, puedes administrar el enfoque de la cámara con la opción cameraPosition.

Comportamientos clave:

  • Con center: Las coordenadas de latitud y longitud especifican el punto exacto del mapa hacia el que apunta la cámara.
  • Con cameraPosition: La cámara se coloca en las coordenadas proporcionadas durante la construcción. Esto suele dificultar el centrado de la vista en un punto de interés específico.

En el siguiente ejemplo, se muestra cómo inicializar un mapa con la opción center para garantizar un punto focal específico. El marcador indica el punto central proporcionado en center:

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=beta&libraries=maps3d"></script>
    </body>
</html>
index.html

Prueba la muestra

Campo visual y alcance

Puedes ajustar la cantidad de mapa que se ve en la ventana gráfica con dos parámetros distintos: rango y FOV. Si bien ambos afectan el nivel de "zoom", funcionan de manera diferente:

  • range: Controla la distancia física entre la cámara y el punto central. Ajustar este valor equivale a acercar o alejar la cámara del mapa.

  • fov (Campo visual): Controla el ángulo del objetivo de la cámara. Un valor más alto actúa como un lente gran angular, que muestra más de la periferia, mientras que un valor más bajo actúa como un teleobjetivo.

En la siguiente comparación, se muestra el mismo mapa en extremos opuestos del espectro de fov. En el mapa de la izquierda, el FOV está establecido en 5 (estrecho/teleobjetivo); en el mapa de la derecha, está establecido en 80 (gran angular).

Comparación en paralelo de dos renderizaciones aéreas en 3D del puente Golden Gate. En el lado izquierdo, se muestra una vista panorámica de todo el tramo del puente y de Marin Headlands. En el lado derecho, se muestra un primer plano extremo de una torre de suspensión roja y la plataforma del puente en un ángulo descendente pronunciado.