Info Gempa - Membuat Peta @ Cong Fandi | 2019-12-27T00:05:06+08:00 | 1 minute read | Update at 2019-12-27T00:05:06+08:00

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

Daftar Isi

Daftar Isi

Spesifikasi APlikasi

Spesifikasi Keterangan
Bahasa Swift 5
Framework SwiftUI
Editor/Tool Xcode 11.3
Platform IOS

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

    map


Penulis bukan orang yang paling mampu, hanya ingin berbagi saja. Semoga dapat mengambil manfaat - Penulis

© 2018 - 2021 The Ngoding

Powered by Hugo with theme Dream.

avatar

The NgodingSebuah cita-cita hanyalah mimpi jika tidak tahu cara mewujudkannya