Adicionar um mapa 3D ao seu app

Selecione a plataforma: Android iOS JavaScript

Este produto ou recurso é experimental (pré-GA). Os produtos e recursos pré-GA têm suporte limitado, e é possível que as mudanças neles não sejam compatíveis com versões anteriores. As Soluções pré-GA são cobertas pelos Termos de Serviço da Plataforma Google Maps. Para mais detalhes, consulte as descrições da fase de lançamento.

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 do 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. 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 do 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 que você precisa fornecer para inicializar um Map é o MapMode:

   • .hybrid ou
   • .satellite

   O arquivo ContentView.swift vai ficar assim:

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

Parte 3: defina sua 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 faça check-in da chave de API em um 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 3D são controladas pela classe Camera. Nesta etapa, você vai aprender a especificar o local, a altitude, o rumo, 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.

   Observação: a ordem dos parâmetros é importante. A câmera é inicializada fornecendo primeiro a latitude e depois a longitude. Verifique se você especificou os valores corretos para cada um, principalmente ao colar de outra fonte. Caso contrário, 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(
         latitude: 40.748339,
         longitude: -73.985912,
         altitude: 211.1,
         heading: 52,
         tilt: 68,
         range: 1039
       ), mode: .hybrid)
     }
   }
   

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

• 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 ao local de latitude e longitude.
• altitude: a altura da câmera acima do nível do mar.

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

Observação: a altitude da câmera é um valor absoluto. Em áreas onde o nível do solo está bem acima do nível do mar, definir uma altitude menor que o nível do solo pode causar efeitos visuais estranhos.

Observação :você também pode ajustar a altitude relativa da câmera usando inclinação e alcance.

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 6: visualizar e executar o app

1. Adicionar uma prévia do Xcode

   As prévias são um recurso avançado do Xcode que permite ver e interagir com o app sem precisar usar o simulador ou um dispositivo externo.

   Para adicionar uma prévia, adicione um bloco de código #Preview {} fora da sua struct.

   #Preview {
     CameraDemo()
   }
   

2. Executar o app

Compile e execute o aplicativo.

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 trajetória da câmera, marcadores 3D ou polígonos.