I recently post a question about having clickable marker on a map thanks to annotations here.
With the popup, the annotation is never at the right position, which make the shadow be at different location and so we can't click on it.
For example, here there is 3 different locations :
When I zoom:
I tried zooming and dezooming and you can see the annotations is doing strange things, and no point stay at the right place (they all should be in France).
Here is my code
Map(position: .constant(.automatic)) {
ForEach(sessions, id: \.id) { session in
Annotation("", coordinate: CLLocationCoordinate2D(latitude: session.getLatitude(), longitude: session.getLongitude())) {
VStack { // this section comes from https://stackoverflow.com/q/79713102/10952503
VStack(alignment: .leading) {
Text("Header")
.foregroundStyle(.white).padding(2)
Text("Line A")
Text("Line B")
Text("Line C")
Text("Line D")
}.fixedSize().padding(.horizontal).padding(.bottom).background {
VStack(spacing: 0) {
Text("X").hidden().frame(maxWidth: .infinity).padding(2).background(Colors.BTN)
Rectangle().fill(.background)
}
}.opacity(selected?.SessionId == session.SessionId ? 1 : 0)
Image(systemName: "mappin")
.resizable()
.frame(width: 16, height: 32)
.foregroundColor(session.getColor())
.shadow(radius: 4)
}.onTapGesture {
selected = (selected?.SessionId == session.SessionId ? nil : session)
}
}
}
}.mapStyle(.hybrid)
How can I make the annotation be at the right place ?
To fix
your zooming problem, try changing your Annotation
to
Annotation("", coordinate: CLLocationCoordinate2D(latitude: session.getLatitude(), longitude: session.getLongitude()), anchor: .bottom) { .... }