Info Gempa - Membuat Peta

Pada tutorial kali ini, kita akan membuat detail halaman yang merupakan tampilan peta atau map

Daftar Isi

Daftar Isi

Spesifikasi APlikasi

langkah - Langkah

1. Buat file baru dengan nama DetailView.swift

2. Tuliskan code dibawah ini

         import SwiftUI
         import Foundation
         import UIKit
         import MapKit
   
         struct DetailView: View {
             var lat = 1.0
             var long = 1.0
             var name = "Some Name"
             var mag = 1.0
             var body: some View {
                 ZStack(alignment: .top){
                     MapView(lat:lat,long:long,name:name,mag:mag)
                         .edgesIgnoringSafeArea(.all)
                     VStack(alignment: .center, spacing: 6){
                         Text(mag)
                             .font(.largeTitle)
                         Text(name)
                     }.clipShape(Rectangle())
                         .frame(width:nil,height: nil)
                         .padding(.all,20)
                         .background(Color.green)
                         .shadow(radius: 9)
                         .cornerRadius(9)
                         .opacity(0.8)
                 }
             }
         }
   
         struct MapView: UIViewRepresentable {
             var lat : double
             var long : double
             var name : String
             var mag : double
   
             func makeUIView(context: Context) -> MKMapView {
                 MKMapView(frame: .zero)
             }
   
             func updateUIView(_ uiView: MKMapView, context: Context) {
   
                 let annotation = MKPointAnnotation()
   
                 let coordinate = CLLocationCoordinate2D(latitude: lat, longitude: long)
   
                 let span = MKCoordinateSpan(latitudeDelta: 1.0, longitudeDelta: 1.0)
   
                 let region = MKCoordinateRegion(center: coordinate, span: span)
   
                 uiView.setRegion(region, animated: true)
   
                 annotation.coordinate = coordinate
                 annotation.title = name
                 annotation.subtitle = "Magnitude: \(mag)"
   
                 uiView.addAnnotation(annotation)
   
   
             }
   
         }
   
   
   

3. Jalankan aplikasinya dan lihat hasilnya

   

Video