Paul Hudsonさんの動画
Integrating MapKit with SwiftUI – Bucket List SwiftUI Tutorial 4/12

を参考に書いて実行します。

import SwiftUI
import MapKit

struct ContentView: View {
    var body: some View {
        Map(interactionModes:[])
            .mapStyle(.hybrid(elevation: .realistic))
    }
}

これを実行すると、

import SwiftUI
import MapKit

struct ContentView: View {
    
    @State private var position = MapCameraPosition.region(
          MKCoordinateRegion(
            center: CLLocationCoordinate2D(latitude: 34.688484750242238,longitude: 135.19641680482033),
            span: MKCoordinateSpan(latitudeDelta: 1, longitudeDelta: 1)
         
         )
    )

    var body: some View {
        Map(position: $position)
            .mapStyle(.hybrid(elevation: .realistic))
    }
}

これで自分の好きな位置、以下の場合は神戸。

を中心とした地図が表示できます。

リンクボタンをつけて好きな場所へワンタップ。

地図の下部にHStackで横並びにボタンを設置。

がボタンの中身の基本。全体は以下

import SwiftUI
import MapKit

struct ContentView: View {
    
    @State private var position = MapCameraPosition.region(
          MKCoordinateRegion(
            center: CLLocationCoordinate2D(latitude: 34.688484750242238,longitude: 135.19641680482033),
            span: MKCoordinateSpan(latitudeDelta: 1, longitudeDelta: 1)
         )
    )

    var body: some View {
        
        VStack{
            Map(position: $position)
                .mapStyle(.hybrid(elevation: .realistic)) 
            
            HStack(spacing:50){
                Button("Paris"){
                    position = MapCameraPosition.region(
                    MKCoordinateRegion(
                        center: CLLocationCoordinate2D(latitude: 48.8566,longitude: 2.3522),
                        span: MKCoordinateSpan(latitudeDelta: 1, longitudeDelta: 1) 
                    )
                    )
                }
                
                Button("Sapporo"){
                    position = MapCameraPosition.region(
                        MKCoordinateRegion(
                            center: CLLocationCoordinate2D(latitude: 43.06220937702329,longitude: 141.36237473501404),
                            span: MKCoordinateSpan(latitudeDelta: 1, longitudeDelta: 1)
                        )
                    )
                }
             }   
         }
    }
}

実行すると

下にParisとSapporoを設置

多地点表示できるようにしてみます。

import SwiftUI
import MapKit

struct Location:Identifiable{
    let id = UUID()
    var nema:String
    var coordinate:CLLocationCoordinate2D
}

struct ContentView: View {
    
        let locations = [
            Location(nema: "Tokyo", coordinate: CLLocationCoordinate2D(latitude: 35.68147772356706, longitude: 139.7672047797007)),
            Location(nema: "Osaka", coordinate: CLLocationCoordinate2D(latitude: 34.70250076973779, longitude: 135.4956413456673))
        ]

    var body: some View {
        
        VStack{
            Map{
                ForEach(locations){location in
                    Annotation(location.nema,coordinate: location.coordinate){
                        Text(location.nema)
                            .font(.headline)
                            .padding()
                            .background(.blue.gradient)
                            .foregroundStyle(.white)
                            .clipShape(.capsule)
                    }
                }
            }
        }
    }
}

配列に地図上の名前、座標のデータを入れて、ループで一括で表示させます。

タップして地点取得

import SwiftUI
import MapKit

struct ContentView: View {
    
    var body: some View {
        
        VStack{
            MapReader{ proxy in 
                Map()
                    .onTapGesture{ position in
                        if let coordinate = proxy.convert(position, from: .local){
                            print(coordinate)
                        }
                    }
            }
        }
    }
}

場所をタップするとコンソールに位置情報が出てきます。