PinStyle 객체를 구성하여 마커의 모양을 맞춤설정할 수 있습니다. PinStyle 유형은 배경 및 테두리 색상, 글리프 텍스트 및 색상, 고도, 사용할 이미지, 추가 맞춤설정을 위한 기타 옵션을 변경하는 옵션을 제공합니다.
다음 코드 샘플은 사용 가능한 맞춤설정 옵션을 사용하여 새 마커를 만들고 스타일을 지정하는 방법을 보여줍니다.
Map(mode: .hybrid) {
Marker(
position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
label: "London",
style: .pin(.init(scale: 2.0))
)
}
이 페이지에서는 다음과 같은 방법으로 마커를 맞춤설정하는 방법을 설명합니다.
마커 크기 조정
마커의 크기를 조정하려면 scale 옵션을 사용합니다.
Map(mode: .hybrid) {
Marker(
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)}
)
)
}
배경 색상 변경
마커의 배경 색상을 변경하려면 PinElement.background 옵션을 사용합니다.
Map(mode: .hybrid){
Marker(
position: .init(latitude: 48.8566, longitude: 2.3522, altitude: 0.0),
label: "Paris",
style: .pin(.init(backgroundColor: .yellow)) // Changes the pin's background color
)
}
테두리 색상 변경
마커의 테두리 색상을 변경하려면 markerOptions.borderColor 옵션을 사용합니다.
Map(mode: .hybrid){
Marker(
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
)
}
글리프에 텍스트 추가
markerOptions.glyph 메서드를 사용하여 기본 글리프를 텍스트 문자로 바꿉니다. 마커의 텍스트 글리프는 마커와 함께 크기가 조정됩니다.
Map(mode: .hybrid){
Marker(
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
}
)
}