기본 마커 맞춤설정

Pin.Configuration 인스턴스를 (Marker3D.Style.pin(_:))에 전달하여 마커의 모양을 맞춤설정할 수 있습니다. 이렇게 하면 배경 및 테두리 색상, 글리프 텍스트 및 색상, 고도 , 사용할 이미지, 추가 맞춤설정을 위한 추가 옵션을 변경할 수 있습니다.

다음 코드 샘플에서는 사용 가능한 맞춤설정 옵션 중 일부를 사용하여 새 마커를 만들고 스타일을 지정하는 방법을 보여줍니다.

Map(mode: .hybrid) {
  Marker3D(
      position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
      label: "London",
      style: .pin(.init(scale: 2.0))
  )
}

이 페이지에서는 다음과 같은 방법으로 마커를 맞춤설정하는 방법을 설명합니다.

• 마커 크기 조정
• 배경 색상 변경
• 테두리 색상 변경
• 글리프에 텍스트 추가

마커 크기 조정

마커의 크기를 조정하려면 scale 옵션을 사용합니다.

Map(mode: .hybrid) {
  Marker3D(
      position: .init(latitude: 35.6762, longitude: 139.6503, altitude: 0.0),
        label: "Tokyo",
        style: .pin(
          .init(
            backgroundColor: .blue,
            borderColor: .yellow,
            scale: 2.0
            ) {Text("G").minimumScaleFactor(0.01)}
        )
  )
}

배경 색상 변경

Pin.Configuration의 backgroundColor 매개변수를 사용하여 마커의 배경 색상을 변경합니다.

Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: 48.8566, longitude: 2.3522, altitude: 0.0),
    label: "Paris",
    style: .pin(.init(backgroundColor: .yellow)) // Changes the pin's background color
  )
}

테두리 색상 변경

Pin.Configuration의 borderColor 매개변수를 사용하여 마커의 테두리 색상을 변경합니다.

Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: -22.9068, longitude: -43.1729, altitude: 0.0),
    label: "Rio de Janeiro",
    style: .pin(.init(backgroundColor: .green, borderColor: .brown)) // Customizes the pin border
  )
}

글리프에 텍스트 추가

Pin.Configuration의 글리프 @ViewBuilder 클로저 매개변수를 사용하여 기본 글리프를 텍스트 문자로 바꿉니다. 마커의 텍스트 글리프는 마커와 함께 확장됩니다.

Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: 25.2048, longitude: 55.2708, altitude: 0.0),
    label: "Dubai",
    style: .pin(.init(backgroundColor: .green) {
        Text("D") // Adds text inside the marker glyph
    })
  )
}