मार्कर को पसंद के मुताबिक बनाना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

सैन फ़्रांसिस्को का मैप, जिसमें पसंद के मुताबिक स्टाइल किए गए मार्कर हैं

मार्कर के दिखने के तरीके को पसंद के मुताबिक बनाया जा सकता है. इसके लिए, 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
    })
  )
}