0Pricing
Android Academy · Aula

Marcadores e câmera

Coloque marcadores e mova a câmera.

Marcadores e câmera é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Android Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Android Academy inclui 4 aulas no total.

Marcando o mapa

Um mapa vazio é apenas um conjunto de blocos. Marcadores transformam-no em informação — um alfinete para uma loja, um restaurante ou o destino do usuário. E a câmera move a área visível para onde a narrativa precisar.

Nesta lição, você adicionará marcadores, personalizará sua aparência, agrupará marcadores em conjuntos e animará a câmera suavemente entre diferentes lugares.

Adicionando um marcador

Em maps-compose, os marcadores são composables que você coloca dentro da lambda de conteúdo de GoogleMap. Cada Marker recebe um MarkerState que contém sua posição.

import com.google.maps.android.compose.Marker
import com.google.maps.android.compose.rememberMarkerState

@Composable
fun MapWithMarker() {
    val position = LatLng(37.7749, -122.4194)
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        Marker(
            state = rememberMarkerState(position = position),
            title = "San Francisco",
            snippet = "Welcome to SF"
        )
    }
}

Título, trecho e janelas de informações

O title e o snippet aparecem na janela de informações padrão quando o usuário toca em um marcador. O toque exibe o título em negrito, com o trecho logo abaixo.

Para ter controle total, você pode fornecer um MarkerInfoWindow com seu próprio conteúdo composable.

Marker(
    state = rememberMarkerState(position = LatLng(48.8584, 2.2945)),
    title = "Eiffel Tower",
    snippet = "Paris, France",
    // The info window pops up on tap by default
)

Personalizando o ícone do marcador

Passe um BitmapDescriptor pelo parâmetro icon para alterar a aparência de um marcador. defaultMarker(hue) altera a cor do alfinete padrão; você também pode criar um a partir de um drawable.

import com.google.android.gms.maps.model.BitmapDescriptorFactory

Marker(
    state = rememberMarkerState(position = LatLng(35.6895, 139.6917)),
    title = "Tokyo",
    icon = BitmapDescriptorFactory.defaultMarker(
        BitmapDescriptorFactory.HUE_AZURE
    )
)

Vários marcadores a partir de dados

Aplicativos reais renderizam marcadores a partir de uma lista. Percorra seus dados dentro do conteúdo do mapa e emita um Marker para cada item. Use uma chave estável para cada item.

data class Place(val name: String, val latLng: LatLng)

@Composable
fun PlacesMap(places: List<Place>) {
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        places.forEach { place ->
            Marker(
                state = rememberMarkerState(position = place.latLng),
                title = place.name
            )
        }
    }
}

Tratando toques em marcadores

Cada Marker aceita uma lambda onClick. Retorne true para consumir o evento (suprimindo a janela de informações padrão) ou false para permitir o comportamento padrão.

Marker(
    state = rememberMarkerState(position = LatLng(40.7128, -74.0060)),
    title = "New York",
    onClick = {
        // handle the tap, e.g. open a detail screen
        true // consume the event
    }
)

Movendo a câmera instantaneamente

Para mover a área visível sem animação, defina diretamente a posição da câmera em CameraPositionState. Isso é um corte brusco — o mapa salta instantaneamente.

val cameraPositionState = rememberCameraPositionState()

// Instant move
cameraPositionState.position = CameraPosition.fromLatLngZoom(
    LatLng(51.5074, -0.1278), // London
    14f
)

Animando a câmera

Para obter uma experiência mais refinada, anime a câmera com animate(). Essa é uma chamada suspensiva, portanto, inicie-a a partir de um escopo de corrotina. Use um CameraUpdate para descrever o destino.

import com.google.android.gms.maps.CameraUpdateFactory

val scope = rememberCoroutineScope()
Button(onClick = {
    scope.launch {
        cameraPositionState.animate(
            CameraUpdateFactory.newLatLngZoom(
                LatLng(48.8566, 2.3522), 13f
            ),
            durationMs = 1000
        )
    }
}) { Text("Fly to Paris") }

Enquadrando vários marcadores

Para exibir vários marcadores ao mesmo tempo, crie um LatLngBounds que contenha todos eles e, em seguida, anime até ele com newLatLngBounds, adicionando uma margem em pixels.

import com.google.android.gms.maps.model.LatLngBounds

val bounds = LatLngBounds.Builder().apply {
    places.forEach { include(it.latLng) }
}.build()

scope.launch {
    cameraPositionState.animate(
        CameraUpdateFactory.newLatLngBounds(bounds, 100) // 100px padding
    )
}

Agrupando muitos marcadores

Centenas de marcadores sobrecarregam um mapa. A biblioteca maps-compose-utils fornece Clustering, que agrupa marcadores próximos em um único balão, que se divide conforme você aumenta o zoom.

import com.google.maps.android.compose.clustering.Clustering

@Composable
fun ClusteredMap(items: List<MyClusterItem>) {
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        Clustering(items = items)
    }
}

Lendo o estado da câmera

Você também pode ler a câmera. cameraPositionState.position fornece o alvo e o zoom atuais, e isMoving informa se o usuário está movendo o mapa no momento. Isso é útil para carregar dados sob demanda apenas da região visível.

LaunchedEffect(cameraPositionState.isMoving) {
    if (!cameraPositionState.isMoving) {
        val center = cameraPositionState.position.target
        // fetch data near `center`
    }
}

Verificação rápida

Você quer que a câmera deslize suavemente até um novo local durante um segundo, em vez de saltar instantaneamente. Qual opção está correta?

Recapitulação

Agora você já consegue tornar um mapa informativo e dinâmico:

  • Coloque composables Marker dentro do conteúdo de GoogleMap, com title, snippet e um icon personalizado.
  • Renderize marcadores a partir de uma lista de dados e trate onClick.
  • Mova a câmera instantaneamente por meio de position ou suavemente por meio de animate().
  • Enquadre vários pontos com LatLngBounds e reduza a desordem usando Clustering.

A seguir: solicitar permissões de localização da maneira correta para que tudo isso funcione em dispositivos reais.

Perguntas Frequentes

A aula “Marcadores e câmera” é grátis?

Sim — o texto completo de “Marcadores e câmera” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Android Academy, atualize para CoddyKit PRO. O curso de Android Academy inclui 4 aulas no total.

O que vou aprender em “Marcadores e câmera”?

Coloque marcadores e mova a câmera. Você pratica Android Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Android Academy?

Nenhuma experiência prévia é necessária. Android Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Marcadores e câmera”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Android Academy?

Sim. Cada aula de Android Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Exibindo um mapa
  2. Obtendo a localização do usuário
  3. Marcadores e câmera
  4. Permissões de localização do jeito certo
← Voltar para Android Academy