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
}
)
}