Harita Gösterme
Uygulamanıza Google Maps ekleyin.
Harita Gösterme, CoddyKit'te ücretsiz bir Android Academy dersidir. Bu, 4 dersinin 1. 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.
Uygulamanızı Haritaya Taşımak
Haritalar, ham koordinatları kullanıcıların görebileceği ve keşfedebileceği bir şeye dönüştürür. Bu derste resmi maps-compose kitaplığını kullanarak Jetpack Compose ekranına etkileşimli bir Google Haritası ekleyeceksiniz.
Dersin sonunda herhangi bir birleştirilebilir bileşene kaydırılabilen ve yakınlaştırılabilen gerçek bir harita ekleyebileceksiniz. Gerekli yapı taşlarını oluşturalım.
Maps Compose Kitaplığı
Google, maps-compose adlı Compose uyumlu bir sarmalayıcı sunar. Bu sarmalayıcı, eski XML MapView'a doğrudan dokunmanıza gerek kalmadan GoogleMap adlı birleştirilebilir bileşeni sunar.
Bu bağımlılıkları modülünüzün build.gradle.kts dosyasına ekleyin. play-services-maps yapıtı temel SDK'dır; maps-compose ise onu Compose'a uyarlar.
// build.gradle.kts (module)
dependencies {
implementation("com.google.maps.android:maps-compose:6.1.0")
implementation("com.google.android.gms:play-services-maps:19.0.0")
}API Anahtarı Alma
Google Haritalar bir API anahtarı gerektirir. Google Cloud Console'da bir anahtar oluşturun, Maps SDK for Android'i etkinleştirin ve ardından anahtarı AndroidManifest.xml içindeki <application> etiketine yerleştirin.
Anahtarı herkese açık olarak göndereceğiniz kaynak koduna asla sabit olarak yazmayın. Anahtarı local.properties içinde saklayın ve bildirim yer tutucusu aracılığıyla ekleyin.
<!-- AndroidManifest.xml, inside <application> -->
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="${MAPS_API_KEY}" />İlk GoogleMap'iniz
En basit harita, tek bir GoogleMap birleştirilebilir bileşenidir. Ona Modifier.fillMaxSize() verin; kaydırılabilen ve yakınlaştırılabilen bir haritaya anında sahip olun.
Görüntülenmesi için alt öğe gerekmez; API anahtarınız geçerli olduğunda Google'ın döşemeleri otomatik olarak oluşturulur.
import com.google.maps.android.compose.GoogleMap
@Composable
fun MapScreen() {
GoogleMap(
modifier = Modifier.fillMaxSize()
)
}Kamerayı Denetleme
Kamera, haritanın nereye bakacağını ve ne kadar yakınlaştırılacağını belirler. Yeniden birleştirmeler arasında hatırlanan bir CameraPositionState sağlarsınız.
Bir LatLng (enlem, boylam) ve yakınlaştırma düzeyinden CameraPosition oluşturun. Daha yüksek yakınlaştırma, daha yakından görünüm demektir.
import com.google.android.gms.maps.model.CameraPosition
import com.google.android.gms.maps.model.LatLng
import com.google.maps.android.compose.rememberCameraPositionState
val sanFrancisco = LatLng(37.7749, -122.4194)
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(sanFrancisco, 12f)
}Kamerayı Haritaya Bağlama
Bu cameraPositionState değerini GoogleMap'e geçirerek haritanın istediğiniz konumda ortalanmış şekilde açılmasını sağlayın. Durum hatırlandığı için kullanıcının kaydırma ve yakınlaştırma işlemleri yeniden oluşturma sırasında korunur.
@Composable
fun CenteredMap() {
val sf = LatLng(37.7749, -122.4194)
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(sf, 12f)
}
GoogleMap(
modifier = Modifier.fillMaxSize(),
cameraPositionState = cameraPositionState
)
}Harita Özellikleri
MapProperties, haritanın ne göstereceğini yapılandırır. Yaygın seçenekler arasında harita türü (normal, uydu, arazi, hibrit) ve mavi konumum noktasının etkin olup olmadığı bulunur.
Her yeniden oluşturmada yeniden oluşturulmaması için özellikler nesnesini hatırlayın.
import com.google.maps.android.compose.MapProperties
import com.google.maps.android.compose.MapType
val properties = remember {
MapProperties(
mapType = MapType.NORMAL,
isMyLocationEnabled = false
)
}Harita Arayüzü Ayarları
MapUiSettings, ekrandaki denetimleri açıp kapatır: yakınlaştırma düğmeleri, pusula, konumum düğmesi ve hareketler.
Daha sade bir görünüm için ihtiyacınız olmayan denetimleri devre dışı bırakın; örneğin yakınlaştırma düğmelerini gizlerken parmakla yakınlaştırma hareketlerini etkin bırakabilirsiniz.
import com.google.maps.android.compose.MapUiSettings
val uiSettings = remember {
MapUiSettings(
zoomControlsEnabled = false,
compassEnabled = true,
scrollGesturesEnabled = true,
zoomGesturesEnabled = true
)
}Hepsini Bir Araya Getirme
Kamerayı, özellikleri ve arayüz ayarlarını tek bir yapılandırılmış haritada birleştirin. Üretim ortamındaki tipik bir harita ekranı genellikle bu yapıdadır.
@Composable
fun ConfiguredMap() {
val sf = LatLng(37.7749, -122.4194)
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(sf, 12f)
}
val properties = remember { MapProperties(mapType = MapType.NORMAL) }
val uiSettings = remember { MapUiSettings(zoomControlsEnabled = false) }
GoogleMap(
modifier = Modifier.fillMaxSize(),
cameraPositionState = cameraPositionState,
properties = properties,
uiSettings = uiSettings
)
}Harita Tıklamalarına Tepki Verme
GoogleMap, onMapClick gibi geri çağırmaları kullanıma sunar. Kullanıcı haritaya dokunduğunda tepki vermek için bunları kullanın; örneğin seçilen bir LatLng değerini yakalayabilirsiniz.
Arayüzünüzün tepki verebilmesi için dokunulan noktayı durumda tutun.
@Composable
fun ClickableMap() {
var picked by remember { mutableStateOf<LatLng?>(null) }
GoogleMap(
modifier = Modifier.fillMaxSize(),
onMapClick = { latLng -> picked = latLng }
)
picked?.let { p ->
Text("Picked: ${p.latitude}, ${p.longitude}")
}
}Yaşam Döngüsü Sizin İçin Yönetilir
Klasik XML MapView ile her yaşam döngüsü olayını el ile iletmeniz gerekirdi. maps-compose kitaplığı, haritayı bileşimin yaşam döngüsüne otomatik olarak bağlar.
Bu sayede el ile onResume/onPause/onDestroy bağlantısı kurmanız gerekmez. Bu da yeni ekranlar için Compose API'sini tercih etmeniz adına bir başka nedendir.
Hızlı Kontrol
Haritanın nerede ortalanacağını ve hangi yakınlaştırma düzeyinde açılacağını denetlemek için hangi bileşim durumu nesnesini hatırlayıp GoogleMap'e geçirirsiniz?
Özet
Artık Compose içine gerçek bir Google Haritası yerleştirebilirsiniz:
maps-compose+play-services-mapsbağımlılıklarını ve manifest dosyasına bir API anahtarı ekleyin.GoogleMapbileşimiyle bir harita görüntüleyin.rememberCameraPositionStateveCameraPositionile haritayı ortalayıp yakınlaştırın.MapPropertiesveMapUiSettingsile özelleştirin,onMapClickile dokunmalara tepki verin.
Sırada, haritayı kullanıcının üzerinde ortalamak için cihazın gerçek konumunu alma var.
Sıkça Sorulan Sorular
“Harita Gösterme” dersi ücretsiz mi?
Evet — “Harita Gösterme” 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.
“Harita Gösterme” dersinde ne öğreneceğim?
Uygulamanıza Google Maps ekleyin. 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 1. dersidir.
“Harita Gösterme” 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.