![見出し画像](https://assets.st-note.com/production/uploads/images/134458538/rectangle_large_type_2_006fa4b735bcb1b4b20630eca2d045a5.png?width=1200)
SwiftUIでいこう - Map
Map、地図を表示する方法を見ていきます。SwiftUIではMapKitをインポートするといろんなことができるようになります。
まず、単純に場所を指定してピンを立てます。
let osaka = CLLocationCoordinate2D(
latitude: 34.68738816139015,
longitude: 135.52592009948697
)
これで軽度、緯度を CLLocationCoordinate2D適応させたものを変数に入れます。この位置情報を使って、 Map()の Marker()で表示させます。
import SwiftUI
import MapKit
struct ContentView: View {
let osaka = CLLocationCoordinate2D(
latitude: 34.68738816139015,
longitude: 135.52592009948697
)
var body: some View {
Map(){
Marker("大阪城",coordinate: osaka)
}
}
}
実行画面です。大阪城にピンが立ちました。
![](https://assets.st-note.com/img/1710966861907-EmynZqqUyb.png?width=1200)
var body: some View {
Map(){
Marker("大阪城",coordinate: osaka)
Annotation("Osaka Cattle", coordinate: osaka) {
ZStack {
RoundedRectangle(cornerRadius: 10)
.fill(Color.blue)
Text("大阪城の場所")
.padding(5)
.foregroundColor(Color.white)
}
}
}
}
Annotation()でピンを立てたところに注意書き、アノテーションを表示させます。 ZStackでレイヤー構造を作って重なりを作ります。
"MapCircle"を追加。
var body: some View {
Map(){
Marker("大阪城",coordinate: osaka)
Annotation("Osaka Cattle", coordinate: osaka) {
ZStack {
RoundedRectangle(cornerRadius: 10)
.fill(Color.blue)
Text("大阪城の場所")
.padding(5)
.foregroundColor(Color.white)
}
}
MapCircle(center: osaka, radius: 100)
.foregroundStyle(.orange.opacity(0.2))
}
}
オレンジの円が出てきます。
![](https://assets.st-note.com/img/1711197445198-lTTbfPjKee.png?width=1200)
"."で繋ぐモディファイアで機能を追加することが出来ます。
この記事が気に入ったらサポートをしてみませんか?