Adicionar um mapa 3D ao seu app

Esta página mostra 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 de configuração e tem o seguinte:

• Um projeto na nuvem 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 SwiftUI básico

1. Criar 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 do 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 seu 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 necessária para inicializar um Map é o MapMode:

   • .hybrid,
   • .roadmap ou
   • .satellite

   Seu arquivo ContentView.swift precisa ficar assim:

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

Parte 3: definir sua chave de API.

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

   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 3D são controladas pela classe Camera. Nesta etapa, você vai aprender a especificar o local, a altitude, a direção, a inclinação, a rotação 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 visualização do centro de Manhattan.

   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: a direção 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 da latitude, local da longitude
• 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.

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

Parte 5: visualizar e executar seu app

1. Adicionar uma visualização do Xcode

   As visualizações são um recurso avançado do Xcode que permite visualizar 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 sua estrutura.

   #Preview {
     ContentView()
   }
   

2. Executar o app

Compile e execute o aplicativo.

Estados de erro e carregamento do mapa

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

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

Se você aplicar uma estilização de mapas baseada na nuvem usando style(mapID:error:) em Map, você pode transmitir um fechamento error para processar erros de carregamento de estilo.

Detectar eventos de toque no mapa

Para detectar eventos de toque no mapa, aplique o onTap(_:) modificador a Map. Quando um usuário toca no mapa, o fechamento recebe um MapTapInfo valor que fornece o location (LatLngAltitude) e o content tocado (MapTapInfo.Content.map ou MapTapInfo.Content.place(id:)). Para mais informações sobre interações de 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 explorar recursos mais avançados do SDK do Maps 3D para iOS, como animações de caminho da câmera, marcadores 3D ou polígonos.