【SwiftUI】マップ上に範囲を表す円を表示する（iOS17）

はじめに

昨日に引き続きiOS17で大型アップデートの入ったMapKitに関する記事です。

今回はタップした位置に範囲を表す円を表示してみます。

サンプルアプリ

実装

import SwiftUI
import MapKit

struct ContentView: View {
    // 東京駅の座標
    @State private var position: MapCameraPosition = .region(.init(
        center: .init(latitude: 35.681236, longitude: 139.767125),
        span: .init(latitudeDelta: 0.005, longitudeDelta: 0.005)
    ))

    // マップ上の円の位置
    @State private var mapCircleLocation: CLLocationCoordinate2D = .init()

    var body: some View {
        MapReader { mapProxy in
            Map(position: $position) {
                MapCircle(center: mapCircleLocation, radius: 100)
                    .foregroundStyle(.green.opacity(0.5))
            }
            .onTapGesture { location in
                guard let selectedLocation = mapProxy.convert(location, from: .local) else { return }
                mapCircleLocation = selectedLocation
            }
        }
    }
}

解説

円を表示している箇所はMapCircleです。
centerが円の表示する位置です。今回はタップした位置をcenterに渡しています。
radiusは円の大きさです。

MapCircle(center: mapCircleLocation, radius: 100)

foregroundStyleで円の色を変更する事ができます。

MapCircle(center: mapCircleLocation, radius: 100)
+   .foregroundStyle(.green.opacity(0.5))

円に枠線を付けたい時はstrokeを使用します。

MapCircle(center: mapCircleLocation, radius: 100)
    .foregroundStyle(.green.opacity(0.5))
    .stroke(.black, style: .init(lineWidth: 3))

おわり

ほぼUIKitを使わずにマップを使えるようになりました。

公式ドキュメント