Adicionar um mapa 3D ao seu app

Selecione a plataforma: Android iOS JavaScript

Nesta página, mostramos um exemplo de como adicionar um mapa 3D básico a um app iOS usando o SDK do Maps 3D para iOS. As instruções nesta página pressupõem que você já concluiu as etapas na página Configuração e tem o seguinte:

• Um projeto do Google Cloud com o SDK do Maps 3D para iOS ativado.
• Uma chave de API para o SDK do Maps 3D para iOS
• Xcode versão 16.0 ou mais recente com o pacote do SDK do Maps 3D para iOS adicionado.

Para mais informações sobre esses pré-requisitos, consulte Configuração.

Siga um codelab mais avançado.

Confira mais exemplos de código no GitHub.

Parte 1: criar um app básico do SwiftUI

1. Crie um app no Xcode.
2. Defina o Nome do produto como Hello3DWorld, com o identificador da organização definido como com.example. O nome do pacote precisa ser com.example.Hello3DWorld.
3. Escolha a interface SwiftUI.
4. Adicione a biblioteca Maps 3D ao seu app. Consulte as instruções na seção de configuração.

Parte 2: adicionar um mapa

1. Abra o arquivo chamado ContentView.swift. Esse é o ponto de entrada e a navegação principal do app.

2. Importe SwiftUI e o pacote GoogleMaps3D.

3. Substitua todo o código dentro da declaração do corpo por Map(mode: .hybrid).

   A configuração inicial mínima que você precisa fornecer para inicializar um Map é o MapMode:

   • .hybrid,
   • .roadmap ou
   • .satellite

   Seu arquivo ContentView.swift vai ficar assim:

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   
   #Preview {
     ContentView()
   }
   

Parte 3: definir a chave de API.

1. A chave de API precisa ser definida antes da inicialização do mapa. Para isso, defina Map.apiKey no manipulador de eventos init() do View que contém o mapa.

   Aviso: não verifique a chave de API no controle de origem externo ou público

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
   
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   

Parte 4: usar uma câmera para controlar a visualização do mapa

As visualizações de mapa em 3D são controladas pela classe Camera. Nesta etapa, você vai aprender a especificar o local, a altitude, o rumo, a inclinação, o rolamento e o alcance para personalizar a visualização do mapa.

1. Mude a chamada de função Map() para incluir uma propriedade initialCamera. Inicialize initialCamera para mostrar uma vista do centro de Manhattan.

   Observação: a ordem dos parâmetros é importante. A câmera é inicializada fornecendo primeiro a latitude e depois a longitude. Especifique os valores corretos para cada um, especialmente ao colar de outra fonte, ou a câmera poderá mostrar um local inesperado.

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
     var body: some View {
       Map(initialCamera: .init(
         center: .init(latitude: 40.748339, longitude: -73.985912, altitude: 211.1),
         heading: 52,
         tilt: 68,
         roll: 0.0,
         range: 1039,
         fieldOfView: .degrees(50)
       ), mode: .hybrid)
     }
   }
   

O código acima define valores para estes parâmetros:

• center: o LatLngAltitude que representa o local da câmera.
• heading: o rolamento em graus do norte para apontar a câmera.
• tilt: o ângulo de inclinação em graus, em que 0 é diretamente acima e 90 é olhando horizontalmente.
• roll: o ângulo de rotação em torno do plano vertical da câmera, em graus.
• range: a distância em metros da câmera em relação à latitude e longitude do local.
• fieldOfView: o ângulo que representa o campo de visão da câmera.

Se você não fornecer nenhum desses parâmetros adicionais, um valor padrão será usado.

Observação: também é possível ajustar a altitude relativa da câmera usando a inclinação e o alcance.

Para que a visualização da câmera mostre mais dados em 3D, defina os parâmetros iniciais para mostrar uma visualização mais próxima e inclinada.

Parte 5: visualizar e executar o app

1. Adicionar uma visualização do Xcode

   As prévias são um recurso poderoso do XCode que permite ver e interagir com seu app sem precisar usar o simulador ou um dispositivo externo.

   Para adicionar uma visualização, adicione um bloco de código #Preview {} fora da struct.

   #Preview {
     ContentView()
   }
   

2. Executar o app

Compile e execute o aplicativo.

Estados de carregamento e erro do mapa

O SDK do Maps 3D para iOS mostra automaticamente um feedback visual integrado ao gerenciar o estado do Map:

• Sobreposição de carregamento:um indicador de progresso centralizado é exibido quando a visualização do mapa é inicializada ou carregada pela primeira vez.
• Sobreposição de erro:uma sobreposição de erro será exibida se o mapa não for carregado.

Se você aplicar um estilo de mapa baseado na nuvem usando style(mapID:error:) em Map, poderá transmitir um encerramento error para processar erros de carregamento de estilo.

Detectar eventos de toque no mapa

Para detectar eventos de toque no mapa, aplique o modificador onTap(_:) a Map. Quando um usuário toca no mapa, o fechamento recebe um valor MapTapInfo que fornece o location (LatLngAltitude) e o content (MapTapInfo.Content.map ou MapTapInfo.Content.place(id:)) tocado. Para mais informações sobre interações com pontos de interesse, consulte Interagir com pontos de interesse.

Map(mode: .hybrid)
  .onTap { tapInfo in
    print("Tapped at \(tapInfo.location), content: \(tapInfo.content)")
  }

Parabéns!

Você adicionou um mapa 3D a um app.

Em seguida, você pode conhecer recursos mais avançados do SDK do Maps 3D para iOS, como animações de trajeto da câmera, marcadores 3D ou polígonos.