地図上の複数のアノテーションのテキストを被らせないよう表示する
解決したいこと
iOS17.0～のswiftUI、Mapkitを使って、
地図上に置いてある複数のアノテーションのテキストを被らせないよう表示したいです。
最悪アイコンは問題ないので、テキストだけでもどんなスケールでも重ならずに表示する方法はないでしょうか。
<前提条件>
・アノテーションは最大3つ
・アノテーションの位置情報は固定ではなく、別で処理させた結果で変わる想定
(別処理の例：現在位置から近い駅を検索、近い順に3つの位置情報を取得)
・アノテーションのテキストをタップするとappleのナビアプリへ飛ぶ想定
・最低限、現在地と3つのアノテーションすべてが表示されるカメラスケールで、極力テキストが被らない
発生している問題・エラー
下図のように、アノテーション同士が近い場所だとかなり拡大しないテキストが重なってしまう。
該当するソースコード
こんな感じで書いてます。
struct ContentView: View {
var body: some View {
VStack{
Map(interactionModes: .all) {
Annotation("", coordinate: CLLocationCoordinate2D(latitude: 35.68137823015221, longitude: 139.76709089598975)) {
Text("テスト1\n表示を被らせたくない")
.bold()
.foregroundColor(.yellow)
.padding([.top, .horizontal], 5)
.background(Color.black.opacity(0.7))
.cornerRadius(5)
.font(.system(size: 20))
Image(systemName: "car").font(.system(size: 20, weight: .bold)).foregroundColor(.red)
}.annotationTitles(.hidden)
Annotation("", coordinate: CLLocationCoordinate2D(latitude: 35.68122136457911, longitude: 139.76655445438064)) {
Text("テスト2\n表示を被らせたくない")
.bold()
.foregroundColor(.yellow)
.padding([.top, .horizontal], 5)
.background(Color.black.opacity(0.7))
.cornerRadius(5)
.font(.system(size: 20))
Image(systemName: "car").font(.system(size: 20, weight: .bold)).foregroundColor(.red)
}.annotationTitles(.hidden)
}
.mapControls {
MapUserLocationButton()
}
}
}
}
0 likes
