経度緯度情報に基づいて配置されているので、表示スケールに応じた近い距離の2つのアノテーションが重なることは必然ですね。
アノテーションが最大2つに限定できるなら、画面の上部と下部に分けて配置することはできるかもしれません。
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))
.offset(x: 0, y: -30)
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))
.offset(x: 0, y: +30)
Image(systemName: "car").font(.system(size: 20, weight: .bold)).foregroundColor(.red)
}.annotationTitles(.hidden)
}
.mapControls {
MapUserLocationButton()
}
}
}
}
offsetを使って上下に離しましたが、positionを使えば、もっと明確に位置を離すことができるかもしれません。
1Like
