Swift Academy · Pelajaran

Menampilkan Peta dalam SwiftUI

Tampilkan peta dan anotasi dengan Map.

Menampilkan Peta dalam SwiftUI adalah pelajaran Swift Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Swift Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Swift Academy mencakup 4 pelajaran total.

Tampilan Peta SwiftUI

SwiftUI menyediakan tampilan Map bawaan (di MapKit) untuk menampilkan peta interaktif tanpa UIKit. Impor MapKit dan letakkan Map dalam hierarki tampilan Anda. Sejak iOS 17, tampilan ini menggunakan API deklaratif modern.

import SwiftUI
import MapKit

struct BasicMap: View {
    var body: some View {
        Map()
    }
}

Wilayah Koordinat

Suatu wilayah dijelaskan oleh MKCoordinateRegion — koordinat pusat ditambah rentang, yaitu seberapa luas lintang dan bujur yang terlihat. Rentang yang lebih kecil akan memperbesar tampilan.

let region = MKCoordinateRegion(
    center: CLLocationCoordinate2D(latitude: 41.008, longitude: 28.978),
    span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
)

Mengontrol Kamera dengan Posisi

Map modern menerima pengikatan ke MapCameraPosition. Anda dapat memulainya dari suatu wilayah, persegi panjang, atau membingkai konten secara otomatis. Gunakan .region(...) untuk menetapkan area tertentu.

struct CityMap: View {
    @State private var position: MapCameraPosition = .region(
        MKCoordinateRegion(
            center: .init(latitude: 41.008, longitude: 28.978),
            span: .init(latitudeDelta: 0.1, longitudeDelta: 0.1)
        )
    )
    var body: some View {
        Map(position: $position)
    }
}

Menambahkan Penanda

Marker menempatkan penanda balon standar pada koordinat dengan judul. Letakkan penanda di dalam blok penutup Map (pembangun konten peta).

Map {
    Marker("Hagia Sophia",
           coordinate: .init(latitude: 41.0086, longitude: 28.9802))
}

Menyesuaikan Penanda

Penanda menerima systemImage dan tint untuk menunjukkan kategori. Dengan begitu, penanda tampak berbeda secara visual di peta.

Map {
    Marker("Cafe", systemImage: "cup.and.saucer.fill",
           coordinate: cafeCoord)
        .tint(.brown)
}

Anotasi dengan Tampilan Khusus

Jika sebuah penanda belum memadai, Annotation memungkinkan Anda menampilkan tampilan SwiftUI apa pun pada suatu koordinat. Berikan judul dan blok konten.

Map {
    Annotation("Office", coordinate: officeCoord) {
        Image(systemName: "building.2.fill")
            .padding(6)
            .background(.blue, in: Circle())
            .foregroundStyle(.white)
    }
}

Menampilkan Banyak Penanda dari Data

Lakukan perulangan pada model Anda dengan ForEach di dalam pembangun konten peta untuk menampilkan banyak penanda. Setiap item menyediakan sebuah koordinat.

struct Place: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}

Map {
    ForEach(places) { place in
        Marker(place.name, coordinate: place.coordinate)
    }
}

Menampilkan Lokasi Pengguna

Tambahkan UserAnnotation() ke konten peta untuk menampilkan titik biru yang umum. Otorisasi lokasi harus sudah diberikan agar fitur ini berfungsi. Anda dapat menggabungkannya dengan penanda Anda sendiri.

Map {
    UserAnnotation()
    ForEach(places) { p in
        Marker(p.name, coordinate: p.coordinate)
    }
}

Kontrol Peta

Tambahkan kontrol standar dengan pengubah .mapControls: kompas, tombol lokasi pengguna, dan tampilan skala. Kontrol tersebut muncul secara otomatis dan mengikuti gaya peta.

Map { UserAnnotation() }
    .mapControls {
        MapUserLocationButton()
        MapCompass()
        MapScaleView()
    }

Gaya Peta

Gunakan pengubah .mapStyle untuk beralih antara tampilan standar, citra (satelit), dan hybrid. Anda juga dapat mengaktifkan ketinggian realistis dan tempat menarik.

Map()
    .mapStyle(.hybrid(elevation: .realistic))

Merespons Perubahan Kamera

Pengubah .onMapCameraChange melaporkan saat wilayah yang terlihat berubah, misalnya setelah pengguna menggeser peta. Gunakan pengubah ini untuk mengambil data bagi area yang baru terlihat.

Map(position: $position)
    .onMapCameraChange { context in
        let center = context.region.center
        print("Now centered at:", center.latitude, center.longitude)
    }

Pemeriksaan Singkat: Peta SwiftUI

Uji pengetahuan Anda tentang MapKit di SwiftUI.

Ringkasan: Menampilkan Peta di SwiftUI

Sekarang Anda dapat membuat peta interaktif:

Gunakan Map modern dengan pengikatan MapCameraPosition.
Tambahkan Marker atau tampilkan tampilan khusus Annotation, dengan melakukan perulangan pada data menggunakan ForEach.
Tampilkan titik biru dengan UserAnnotation() dan tambahkan .mapControls.
Atur gaya peta dan respons terhadap perubahan kamera dengan .onMapCameraChange.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menampilkan Peta dalam SwiftUI” gratis?

Ya — teks lengkap “Menampilkan Peta dalam SwiftUI” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Swift Academy, upgrade ke CoddyKit PRO. Kursus Swift Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menampilkan Peta dalam SwiftUI”?

Tampilkan peta dan anotasi dengan Map. Kamu berlatih Swift Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Swift Academy?

Tidak diperlukan pengalaman sebelumnya. Swift Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Menampilkan Peta dalam SwiftUI” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Swift Academy ini?

Ya. Setiap pelajaran Swift Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Swift Academy