Interagir com o mapa

Esta página contém informações sobre os principais recursos dos mapas 3D fotorrealistas no JavaScript do Maps que permitem criar experiências 3D interativas e imersivas. A documentação a seguir abrange:

  • Processar eventos da interface do usuário para uma interação perfeita.
  • Incluir controles de exploração para navegar em espaços 3D.
  • Usar caminhos de câmera predefinidos para visitas guiadas.
  • Aplicar restrições à câmera para manter o foco em uma área específica.

Eventos da interface do usuário

Esta seção descreve os eventos interativos e as notificações de mudança de estado que você pode detectar e processar programaticamente ao trabalhar com mapas em 3D. O JavaScript no navegador é orientado a eventos, ou seja, ele responde às interações do usuário gerando eventos que o programa pode detectar e executar o código de acordo com isso.

Há dois tipos principais de eventos:

  • Os eventos de interação do usuário (como cliques do mouse) são propagados da visualização do mapa 3D para o código. Esses eventos permitem que você responda a ações diretas do usuário no ambiente do mapa 3D. Confira o exemplo.
  • As notificações de mudança de estado refletem atualizações nos modelos de dados de mapa 3D subjacentes e no estado de renderização, usando um esquema de nomenclatura property_changed convencional.

Cada objeto da API de mapeamento 3D expõe um conjunto de eventos nomeados para os quais o programa pode registrar listeners e executar a lógica quando esses eventos ocorrem usando a função addEventListener() integrada. O exemplo a seguir ilustra eventos comuns acionados quando um usuário interage com um mapa 3D.

O exemplo a seguir mostra quais eventos são acionados à medida que um usuário interage com o mapa:

Controles de análise

Os mapas mostrados na API Maps JavaScript com mapas 3D fotorrealistas contêm elementos da interface que oferecem suporte à interação do usuário com o mapa. Esses elementos são conhecidos como controles do usuário. Os controles de exploração são incluídos por padrão, mas você pode suprimir eles no seu aplicativo.

A imagem a seguir mostra os controles padrão exibidos pelos mapas 3D fotorrealistas no Maps JavaScript:

Imagem de um mapa com controles

Confira abaixo uma lista completa de controles nos mapas 3D fotorrealistas no JavaScript do Maps:

  • O controle de zoom mostra os botões "+" e "-" para mudar o nível de zoom do mapa.
  • O controle de inclinação permite mudar a inclinação da câmera.
  • O controle de rotação permite mudar a direção da câmera.
  • O controle de movimento mostra os botões "←", "→", "↑" e "↓" para mudar o centro do mapa.

Controles e animação da câmera

Caminhos predefinidos da câmera

Os mapas 3D fotorrealistas na API Maps JavaScript oferecem dois caminhos de câmera predefinidos. Os caminhos da câmera podem ser personalizados mudando a duração da animação (aumentando ou diminuindo a velocidade) ou combinando-os para criar experiências mais cinematográficas.

Os mapas 3D fotorrealistas na API Maps JavaScript são compatíveis com os seguintes caminhos de câmera:

  • A animação FlyCameraTo voa do centro do mapa para um destino especificado.
  • A animação FlyCameraAround gira em torno de um ponto no mapa quantas vezes você especificar.

Os dois caminhos disponíveis podem ser combinados para voar até um ponto de interesse, girar em torno dele e parar quando quiser.

Testar amostra

Restrições de câmera

Talvez seja necessário controlar o deslocamento da câmera, a altitude máxima ou criar limites de lat/lng que restrinjam o movimento de um usuário em um determinado mapa. Para fazer isso, use as restrições de câmera.

Para conferir um exemplo de como as restrições de câmera funcionam e são implementadas, confira a demonstração.