実現したいこと
今私は地図を活用したアプリケーションを開発しています。
マップ上に、写真がピンとして表示されており、そのピンをタップすると写真の詳細情報を吹き出しの形式でマップ上に表示したいと考えております。
↑中央に表示されておる丸いピンをタップすると、以下の詳細画面が出る。
ピンをタップした際の表示の切り替えはできているのですが、詳細表示ピンの当たり判定が1個前の丸ピンのところにしかないため、困っています。詳細表示ピン全体に当たり判定が欲しいです。
前提
SwiftUIにて、開発を行なっております。
Xcodeのversionは 15.0.1 (15A507)
iOS17対応のアプリを想定しています。
発生している問題・エラーメッセージ
詳細画面ピンを表示した際、ピン(吹き出しの形)に当たり判定がなく、最初の丸ピンの場所にしか当たり判定がありません。
詳細画面自体はボタンで作っているおり、当たり判定があることは確認済みなのですが、これをmap上で、Annotationとして呼び出すと当たり判定がうまく機能してくれません。
該当のソースコード
if文の中に書かれている pinは丸ピンで pin2 は詳細画面ピンです。
swiftUI
1Map(position: $position, interactionModes: .all) //地図を表示 2 { 3 UserAnnotation() //現在地を示すピン 4 5 Annotation("", coordinate: positionPin) { 6 if isPinVisible { 7 pin(isPinVisible: $isPinVisible, imageURL: imageURL) 8 } else { 9 pin2(isPinVisible: $isPinVisible, imageURL: imageURL) 10 .offset(y: -150) 11 } 12 } 13 }
pinのコード(pin2も同様です)↓
swiftUI
1struct pin: View { 2 @Binding var isPinVisible: Bool 3 var imageURL: URL? 4 var size: CGFloat = 50 5 var outerWidth: CGFloat = 2 6 7 var body: some View { 8 Button(action: { 9 isPinVisible.toggle() 10 print("1") 11 }) { 12 AsyncImage(url: imageURL) { image in 13 image 14 .resizable() 15 .scaledToFill() 16 .frame(width: size, height: size) 17 } placeholder: { 18 ProgressView() 19 .frame(width: size, height: size) 20 .background(Color.gray) 21 } 22 .clipShape(Circle()) 23 .overlay( 24 Circle() 25 .stroke(Color.white, lineWidth: outerWidth) 26 ) 27 .shadow(radius: 7) 28 } 29 } 30}
試したこと
①if文で if else の書き方ではなく、2本のif文で分岐をしてみる
②詳細画面ピンのButtonを作り直してみる
0 コメント