Android Academy · Oppitunti

Kartan näyttäminen

Lisätkää Google Maps sovellukseenne.

Oppitunti 1/413 vaihetta

Kartan näyttäminen on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Android Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Android Academy-kurssilla on yhteensä 4 oppituntia.

Sovelluksen tuominen kartalle

Kartat muuttavat paljaat koordinaatit joksikin, minkä käyttäjät voivat nähdä ja tutkia. Tässä oppitunnissa lisäätte vuorovaikutteisen Google Map -kartan Jetpack Compose -näyttöön virallisen maps-compose-kirjaston avulla.

Oppitunnin lopussa osaatte lisätä minkä tahansa composable-komponentin sisään oikean, siirrettävän ja zoomattavan kartan. Otetaan rakennuspalikat käyttöön.

Maps Compose -kirjasto

Google tarjoaa Composeen sopivan kääreen nimeltä maps-compose. Se tarjoaa GoogleMap-composable-komponentin, joten vanhaa XML-pohjaista MapView-näkymää ei tarvitse käsitellä suoraan.

Lisätkää nämä riippuvuudet moduulinne build.gradle.kts-tiedostoon. play-services-maps-artefakti on taustalla toimiva SDK, ja maps-compose mukauttaa sen Composea varten.

// 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-avaimen hankkiminen

Google Maps edellyttää API-avainta. Luokaa avain Google Cloud Consolessa, ottakaa Maps SDK for Android käyttöön ja sijoittakaa avain sitten AndroidManifest.xml-tiedostoon <application>-tagin sisälle.

Älkää koskaan kirjoittako avainta kovakoodattuna julkisesti julkaistavaan lähdekoodiin. Tallentakaa se local.properties-tiedostoon ja välittäkää se manifestin placeholderin kautta.

<!-- AndroidManifest.xml, inside <application> -->
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />

Ensimmäinen GoogleMap

Yksinkertaisin kartta on yksi GoogleMap-composable-komponentti. Antakaa sille Modifier.fillMaxSize(), niin saatte heti siirrettävän ja zoomattavan kartan.

Kartta ei tarvitse lapsikomponentteja näkyäkseen — Googlen karttalaatat piirretään automaattisesti, kun API-avain on kelvollinen.

import com.google.maps.android.compose.GoogleMap

@Composable
fun MapScreen() {
    GoogleMap(
        modifier = Modifier.fillMaxSize()
    )
}

Kameran hallinta

Kamera määrittää, mihin kartta kohdistuu ja kuinka lähelle on zoomattu. Tarjoatte CameraPositionState-tilan, joka säilytetään koostamisten välillä.

Rakentakaa CameraPosition LatLng-olion (leveysasteen ja pituusasteen) sekä zoomaustason perusteella. Suurempi zoomaustaso tarkoittaa lähempää näkymää.

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

Kameran liittäminen karttaan

Välitä cameraPositionState kohteelle GoogleMap, jotta kartta avautuu haluamastasi kohdasta keskitettynä. Koska tila säilytetään, käyttäjän kartan siirrot ja zoomaukset säilyvät myös uudelleenkokoamisen yli.

@Composable
fun CenteredMap() {
    val sf = LatLng(37.7749, -122.4194)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(sf, 12f)
    }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    )
}

Kartan ominaisuudet

MapProperties määrittää, mitä kartta näyttää. Yleisiä asetuksia ovat kartan tyyppi (normaali, satelliitti, maasto tai hybridi) sekä se, onko sininen oma sijainti -piste käytössä.

Muista ominaisuusolio, jotta sitä ei luoda uudelleen jokaisen uudelleenkokoamisen yhteydessä.

import com.google.maps.android.compose.MapProperties
import com.google.maps.android.compose.MapType

val properties = remember {
    MapProperties(
        mapType = MapType.NORMAL,
        isMyLocationEnabled = false
    )
}

Kartan käyttöliittymäasetukset

MapUiSettings ottaa käyttöön ja poistaa käytöstä näytön säätimet: zoomauspainikkeet, kompassin, oman sijainnin painikkeen ja eleet.

Poista käytöstä säätimet, joita et tarvitse, jotta näkymä pysyy selkeämpänä — voit esimerkiksi piilottaa zoomauspainikkeet mutta pitää nipistyszoomaus-eleet käytössä.

import com.google.maps.android.compose.MapUiSettings

val uiSettings = remember {
    MapUiSettings(
        zoomControlsEnabled = false,
        compassEnabled = true,
        scrollGesturesEnabled = true,
        zoomGesturesEnabled = true
    )
}

Kaiken kokoaminen yhteen

Yhdistä kamera, ominaisuudet ja käyttöliittymäasetukset yhdeksi määritetyksi kartaksi. Tämä on tuotantokäyttöön tarkoitetulle karttanäkymälle tyypillinen rakenne.

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

Karttaklikkausten käsittely

GoogleMap tarjoaa onMapClick-kutsun kaltaisia callback-funktioita. Niiden avulla voit reagoida, kun käyttäjä napauttaa karttaa — voit esimerkiksi tallentaa valitun LatLng-sijainnin.

Säilytä napautettu piste tilassa, jotta käyttöliittymä voi reagoida siihen.

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

Elinkaari käsitellään automaattisesti

Klassista XML-pohjaista MapView-näkymää käytettäessä jokainen elinkaaritapahtuma piti välittää manuaalisesti. maps-compose-kirjasto yhdistää kartan koostamisen elinkaareen automaattisesti.

Tämä tarkoittaa, ettei manuaalista onResume/onPause/onDestroy-kytkentää tarvita — tämä on yksi syy lisää suosia Compose-rajapintaa uusissa näytöissä.

Pikatarkistus

Minkä koostettavan tiliolion muistat ja välität kohteelle GoogleMap määrittääksesi, mihin kartta keskitetään ja kuinka paljon sitä zoomataan?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Osaat nyt sijoittaa oikean Google Map -kartan Compose-sovellukseen:

Lisää maps-compose + play-services-maps sekä manifestiin API-avain.
Piirrä kartta GoogleMap-koostettavalla funktiolla.
Keskitä ja zoomaa karttaa rememberCameraPositionState- ja CameraPosition-olioiden avulla.
Muokkaa karttaa MapProperties- ja MapUiSettings-olioilla ja reagoi napautuksiin onMapClick-funktion avulla.

Seuraavaksi haetaan laitteen todellinen sijainti, jotta kartta voidaan keskittää käyttäjään.

Aloita maksutta

Opi Kotlin tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 36
Oppitunnit: 152

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Kartan näyttäminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “Kartan näyttäminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Android Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Kartan näyttäminen”?

Lisätkää Google Maps sovellukseenne. Harjoittelet Android Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Android Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Android Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”Kartan näyttäminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Android Academy-oppitunnilla?

Kyllä. Jokainen Android Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Android Academy