![見出し画像](https://assets.st-note.com/production/uploads/images/135669637/rectangle_large_type_2_043720fd7933a0fc8c85ee23b6b0556a.png?width=1200)
SwiftUIでいこう - もっと Map
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))
}
}
これを実行すると、
![](https://assets.st-note.com/img/1711878273343-wUbTHF6r3V.png?width=1200)
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))
}
}
これで自分の好きな位置、以下の場合は神戸。
latitude: 34.688484750242238,longitude: 135.19641680482033
を中心とした地図が表示できます。
![](https://assets.st-note.com/img/1711885700198-flgSidczRz.png?width=1200)
リンクボタンをつけて好きな場所へワンタップ。
地図の下部にHStackで横並びにボタンを設置。
position = MapCameraPosition.region(
MKCoordinateRegion(
center: CLLocationCoordinate2D(latitude: 48.8566,longitude: 2.3522),
span: MKCoordinateSpan(latitudeDelta: 1, longitudeDelta: 1)
)
)
がボタンの中身の基本。全体は以下
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)
)
)
}
}
}
}
}
実行すると
![](https://assets.st-note.com/img/1712145478998-rlrP4gNRgy.png?width=1200)
下に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)
}
}
}
}
}
}
配列に地図上の名前、座標のデータを入れて、ループで一括で表示させます。
![](https://assets.st-note.com/img/1712147340027-ZfeFB9Alx5.png?width=1200)
タップして地点取得
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)
}
}
}
}
}
}
場所をタップするとコンソールに位置情報が出てきます。
![](https://assets.st-note.com/img/1712148665070-zRJRruz1it.png?width=1200)
この記事が気に入ったらサポートをしてみませんか?