解放区在住氷翠 緑の閃光
【解放区在住氷翠】デスクトップアプリケーション

【Swiftui】マップを表示したい（macos）

2023-07-16

Macos : 13.4.1(c)
Xcode : 14.3.1
Swift : 5

どうも、氷翠です。

今回、アプリの開発を進めておこうかと、地図に関する情報を集めていました。

import MapKit

これでMapを利用することができるのだ。

    var body: some View {
        VStack {
            Map(coordinateRegion: $region,
                //Mapの操作の指定
                interactionModes: .all,
                //現在地の表示
                showsUserLocation: true,
                //現在地の追従
                userTrackingMode: .constant(MapUserTrackingMode.follow),
                //マーカの指定
                annotationItems: place
            )
        }
    }

これでとりあえず地図は表示されるのだが、その前に「$region」の定義をしなくてはいけない。

// マップを表示するための初期状態を設定する内容
@State private var region = MKCoordinateRegion(
    //Mapの中心の緯度経度
    //北43.80957°, 東143.88749°
    center: CLLocationCoordinate2D(latitude: 43.80957,
                                   longitude: 143.88749),
    //緯度の表示領域(m)
    latitudinalMeters: 100,
    //経度の表示領域(m)
    longitudinalMeters: 100
)

つまり、初期値としての座標の定義をしている。

次は、ピンを立てるための複数の座標を定義していく。

struct IdentifiablePlace: Identifiable {
    let id: UUID
    let location: CLLocationCoordinate2D
    let color : Color
    init(id: UUID = UUID(), lat: Double, long: Double, color: Color) {
        self.id = id
        self.location = CLLocationCoordinate2D(
            latitude: lat,
            longitude: long)
        self.color = color
    }
}

これをimportの下に定義しておく。
これはデータ一つ分のデータで、繰り返し処理に使うため、「Identifiable」としておく。

「struct ContentView: View」の中で配列を定義します。

let place = [
    IdentifiablePlace(lat: 43.80977, long: 143.88741, color: Color.blue),
    IdentifiablePlace(lat: 43.80916, long: 143.88710, color: Color.red),
    IdentifiablePlace(lat: 43.80949, long: 143.88817, color: Color.orange),
    IdentifiablePlace(lat: 43.80943, long: 143.88831, color: Color.orange),
    IdentifiablePlace(lat: 43.80933, long: 143.88844, color: Color.orange)
]

こんな感じで。これをMapに適用させる。

Map(coordinateRegion: $region,
        //Mapの操作の指定
        interactionModes: .all,
        //現在地の表示
        showsUserLocation: true,
        //現在地の追従
        userTrackingMode: .constant(MapUserTrackingMode.follow),
        //マーカの指定
        annotationItems: place
    )
    { place in // 複数のピンを立てるため以下の様にする
        MapMarker(coordinate: place.location, tint: place.color)
    }
    .task(){
        //位置情報へのアクセスを要求
        let manager = CLLocationManager()
        manager.requestWhenInUseAuthorization()
}

「MapMarker」を利用してピンを立てる。

また、「.task()」を使って、GPSの機能を利用するためのアクセスを要求することができる。

これで地図が思い通りに表示されます。

コメントを残す

メールアドレスが公開されることはありません。