您可以設定 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
}
)
}