Controlar a posição da câmera

Nos mapas 3D da API Maps JavaScript, você gerencia o foco da câmera usando a opção cameraPosition.

Comportamentos principais:

Com center: as coordenadas de latitude e longitude especificam o ponto exato no mapa para onde a câmera está apontada.
Com cameraPosition: a câmera é colocada nas coordenadas fornecidas durante a construção. Isso geralmente dificulta o posicionamento da visualização em um ponto de interesse específico.

O exemplo a seguir demonstra a inicialização de um mapa usando a opção center para garantir um ponto focal específico. O marcador indica o ponto central fornecido no 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

Confira o código-fonte de exemplo 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

Testar amostra

JSFiddle.net

Campo de visão e alcance

É possível ajustar a quantidade do mapa visível na janela de visualização usando dois parâmetros distintos: alcance e fov. Embora ambos afetem o nível de "zoom", eles funcionam de maneira diferente:

range: controla a distância física entre a câmera e o ponto central. Ajustar isso é equivalente a aproximar ou afastar a câmera do mapa.
fov (campo de visão): controla o ângulo da lente da câmera. Um valor maior funciona como uma lente grande angular, mostrando mais da periferia, enquanto um valor menor funciona como uma lente telefoto.

A comparação a seguir mostra o mesmo mapa em extremidades opostas do espectro fov. No mapa à esquerda, o fov está definido como 5 (estreito/teleobjetiva); no mapa à direita, ele está definido como 80 (grande angular).

Uma comparação lado a lado de duas renderizações aéreas em 3D da ponte Golden Gate. O lado esquerdo mostra uma ampla visão panorâmica de toda a extensão da ponte e de Marin Headlands. O lado direito mostra um close extremo de uma torre de suspensão vermelha e o tabuleiro da ponte em um ângulo íngreme para baixo.