MapKitで地図を表示する

iOSアプリで地図を表示したい

MapKitはSwiftUIなどで利用できる。地図関連のフレームワークです。

今回は東京駅を中心として、ピンを打ってみました。

import SwiftUI
import MapKit

struct Location: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
    let color: Color
}

@available(iOS 17.0, *)
struct MapPage: View {

    @State var position: MapCameraPosition = .region(
        MKCoordinateRegion(
            center: CLLocationCoordinate2D(latitude: 35.68125013046526,
                                           longitude: 139.76701408026017),
            span: MKCoordinateSpan(latitudeDelta: 0.027, longitudeDelta: 0.027)
        )
    )
    
    @State var locations = [
        Location(name: "東京駅",
                 coordinate: CLLocationCoordinate2D(latitude: 35.68125013046526,
                                                    longitude: 139.76701408026017),
                 color: .red),
        Location(name: "丸善 丸の内本店",
                 coordinate: CLLocationCoordinate2D(latitude: 35.68375947842839,
                                                    longitude: 139.76673196941562),
                 color: .blue),
        Location(name: "八重洲ブックセンター 本店",
                 coordinate: CLLocationCoordinate2D(latitude: 35.678347344716755,
                                                    longitude: 139.76815299668363),
                 color: .blue),
    ]
    
    var body: some View {
        Map(position: self.$position) {
            ForEach(self.locations) { location in
                // タップ可能なピン
                Annotation(location.name, coordinate: location.coordinate) {
                    Button {
                        openInAppleMaps(location)
                    } label: {
                        VStack(spacing: 4) {
                            Image(systemName: "mappin.circle.fill")
                                .font(.system(size: 20))
                                .foregroundColor(location.color)
                            Text(location.name)
                                .font(.caption)
                                .bold()
                                .foregroundColor(location.color)
                        }
                    }
                    .buttonStyle(.plain)
                }
            }
        }
        .ignoresSafeArea()
    }
    
    /// Appleマップで開く
    private func openInAppleMaps(_ location: Location) {
        let placemark = MKPlacemark(coordinate: location.coordinate)
        let mapItem = MKMapItem(placemark: placemark)
        mapItem.name = location.name
        mapItem.openInMaps(launchOptions: [
            MKLaunchOptionsDirectionsModeKey: MKLaunchOptionsDirectionsModeDriving
        ])
    }
}