سفارشی‌سازی نشانگر پایه

می‌توانید ظاهر نشانگرها را با ارسال یک نمونه 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)}
        )
  )
}

تغییر رنگ پس‌زمینه

از پارامتر backgroundColor در Pin.Configuration برای تغییر دادن رنگ پس‌زمینه نشانگر استفاده کنید:

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

تغییر رنگ حاشیه

از پارامتر borderColor در Pin.Configuration برای تغییر رنگ حاشیه نشانگر استفاده کنید:

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

افزودن نوشتار به گلیف

از پارامتر بسته شدن @ViewBuilder در Pin.Configuration استفاده کنید تا نویسه پیش‌فرض را با نویسه نوشتاری جایگزین کنید. نوشتار نشانگر با نشانگر مقیاس‌بندی می‌شود:

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