[iOS/SwiftUI] Custom Map Marker

안녕하세요 :D 망고입니다🥭

이번에는 SwiftUI에서 Custom Map Marker 만드는 방법에 대해 알아보겠습니다.

 

 

Map Marker

Map(coordinateRegion: $viewModel.mapRegion,
                annotationItems: viewModel.locations,
                annotationContent: { location in
                MapMarker(coordinate: location.coordinates, tint: .blue)
            })
                .ignoresSafeArea()

먼저 기본 Map Marker를 추가하는 방법입니다.

더 이쁜 마커를 만들고싶기 때문에 Custom을 해줍니다..

 

 

Custom Map Marker

var body: some View {
        VStack(spacing: 0) {
            Image(systemName: "map.circle.fill")
                .resizable()
                .scaledToFit()
                .frame(width: 30, height: 30)
                .font(.headline)
                .foregroundColor(.white)
                .padding(6)
                .background(accentColor)
                .cornerRadius(36)
            
            Image(systemName: "triangle.fill")
                .resizable()
                .scaledToFit()
                .foregroundColor(accentColor)
                .frame(width: 10, height: 10)
                .rotationEffect(Angle(degrees: 180))
                .offset(y: -3)
                .padding(.bottom, 40)
        }
    }

새로운 View를 생성해 원하는 모양의 Custom Marker를 만들어줍니다.

 

Map(coordinateRegion: $viewModel.mapRegion,
            annotationItems: viewModel.locations,
            annotationContent: { location in
            MapAnnotation(coordinate: location.coordinates) {
                customMapMarkerView()
    	}

MapAnnotation을 이용해 새로만든 customMapMarkerView()를 넣어주면 됩니다.

완성입니다😊