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

هذا المنتج أو الميزة في مرحلة تجريبية (ما قبل التوفر للجمهور العام). قد يكون الدعم المقدّم للمنتجات والميزات في مرحلة ما قبل التوفّر للجمهور العام محدودًا، وقد لا تكون التغييرات التي يتم إجراؤها على المنتجات والميزات هنا متوافقة مع الإصدارات الأخرى من هذه المرحلة. تخضع عروض مرحلة ما قبل التوفّر للجمهور العام لبنود الخدمة المحدّدة في "منصة خرائط Google". لمزيد من المعلومات، يُرجى الاطّلاع على أوصاف مراحل الإطلاق.

اختيار النظام الأساسي: Android‏ iOS‏ JavaScript‏

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