Android Academy · Ders

İşaretçiler ve Kamera

İşaretçiler yerleştirin ve kamerayı hareket ettirin.

İşaretçiler ve Kamera, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Android Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Android Academy kursu toplamda 4 dersten oluşur.

Haritayı İşaretleme

Boş bir harita yalnızca döşemelerden oluşur. İşaretçiler onu bilgiye dönüştürür: bir mağaza, restoran veya kullanıcının varış noktası için bir iğne. Kamera da görünüm alanını gereken yere taşır.

Bu derste işaretçiler ekleyecek, onları özelleştirecek, kümeler hâlinde gruplayacak ve kamerayı konumlar arasında akıcı biçimde hareket ettireceksiniz.

İşaretçi Ekleme

maps-compose içinde işaretçiler, GoogleMap içerik lambda'sının içine yerleştirdiğiniz bileşimlerdir. Her Marker, konumunu tutan bir MarkerState alır.

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"
        )
    }
}

Başlık, Açıklama ve Bilgi Pencereleri

Kullanıcı bir işaretçiye dokunduğunda title ve snippet, varsayılan bilgi penceresinde görünür. Dokunulduğunda başlık kalın, açıklama ise altında gösterilir.

Tam denetim için kendi bileşim içeriğinizi içeren bir MarkerInfoWindow sağlayabilirsiniz.

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

İşaretçi Simgesini Özelleştirme

İşaretçinin görünümünü değiştirmek için icon parametresi üzerinden bir BitmapDescriptor geçirin. defaultMarker(hue) standart iğnenin rengini değiştirir; ayrıca bir çizilebilir kaynaktan da işaretçi oluşturabilirsiniz.

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
    )
)

Verilerden Birden Çok İşaretçi Oluşturma

Gerçek uygulamalar işaretçileri bir listeden görüntüler. Harita içeriğinde verilerinizin üzerinde döngü kurup her öğe için bir Marker üretin. Her öğe için kararlı bir anahtar kullanın.

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
            )
        }
    }
}

İşaretçi Tıklamalarını İşleme

Her Marker bir onClick lambdasını kabul eder. Olayı tüketmek (varsayılan bilgi penceresini bastırmak) için true, varsayılan davranışın çalışmasına izin vermek için false döndürün.

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
    }
)

Kamerayı Anında Taşıma

Görünüm alanını animasyon olmadan taşımak için kamera konumunu doğrudan CameraPositionState üzerinde ayarlayın. Bu, sert bir geçiştir; harita bir anda yeni konuma geçer.

val cameraPositionState = rememberCameraPositionState()

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

Kameraya Animasyon Uygulama

Özenli bir görünüm için kameraya animate() ile animasyon uygulayın. Bu, askıya alınabilir bir çağrıdır; bu nedenle bir coroutines kapsamından başlatın. Hedefi tanımlamak için bir CameraUpdate kullanın.

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") }

Birden Çok İşaretçiye Sığdırma

Aynı anda birkaç işaretçi göstermek için hepsini içeren bir LatLngBounds oluşturun, ardından piksel cinsinden kenar boşluğuyla birlikte newLatLngBounds kullanarak o alana animasyon uygulayın.

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
    )
}

Çok Sayıda İşaretçiyi Kümeleme

Yüzlerce işaretçi haritayı karmaşıklaştırır. maps-compose-utils kitaplığı, yakındaki işaretçileri tek bir baloncukta gruplayan ve yakınlaştırdıkça ayrıştıran Clustering özelliğini sunar.

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

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

Kamera Durumunu Okuma

Kamerayı ayrıca okuyabilirsiniz. cameraPositionState.position geçerli hedefi ve yakınlaştırma düzeyini verir; isMoving ise kullanıcının şu anda kaydırma yapıp yapmadığını bildirir. Bu, verileri yalnızca görünür bölge için tembel olarak yüklemek açısından yararlıdır.

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

Hızlı Kontrol

Kameranın bir anda geçmek yerine bir saniye içinde yeni bir konuma akıcı biçimde ilerlemesini istiyorsunuz. Hangisi doğrudur?

Özet

Artık bir haritayı bilgilendirici ve dinamik hâle getirebilirsiniz:

title, snippet ve özel icon içeren Marker bileşimlerini GoogleMap içeriğine yerleştirin.
İşaretçileri bir veri listesinden görüntüleyin ve onClick olayını işleyin.
Kamerayı position ile anında, animate() ile akıcı biçimde taşıyın.
Birçok noktayı LatLngBounds ile sığdırın ve karmaşayı Clustering kullanarak azaltın.

Sırada: tüm bunların gerçek cihazlarda çalışması için konum izinlerini doğru şekilde istemek var.

Sıkça Sorulan Sorular

“İşaretçiler ve Kamera” dersi ücretsiz mi?

Evet — “İşaretçiler ve Kamera” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Android Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Android Academy kursu toplamda 4 dersten oluşur.

“İşaretçiler ve Kamera” dersinde ne öğreneceğim?

İşaretçiler yerleştirin ve kamerayı hareket ettirin. Android Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Android Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Android Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“İşaretçiler ve Kamera” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Android Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Android Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Android Academy Sayfasına Dön