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))
}
}
これを実行すると、
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)
}
}
}
}
}
}
場所をタップするとコンソールに位置情報が出てきます。
この記事が気に入ったらサポートをしてみませんか?