تخصيص محدّد الموقع الأساسي

يمكنك تخصيص مظهر مواد الطباعة من خلال تمرير مثيل 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
  )
}

إضافة نص إلى صورة رمزية

استخدِم مَعلمة الإغلاق glyph @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
    })
  )
}