Map

عرض الخرائط والمواقع والطرق داخل العداد. يمكن ضبط مركز الكاميرا والاتجاه والتكبير ونمط الخريطة باستخدام path لتوفير نقاط المسار؛ يتطلب تتبع موقع المستخدم بيانات تحديد المواقع الصحيحة.

مثال

function main() {
  return (
    <Map
      center="userLocation"
      heading="northUp"
      mapStyle="standard"
      appearance="automatic"
      showUserLocation={true}
      cameraAnimation={true}
      regionOffset={{ x: 0, y: 20 }}
    />
  );
}

الاستخدام

center للكاميرا وpath للمسار بشكل منفصل. المركز لا ينشئ مسارًا، وnull يفصل المقاطع. cameraAnimation للكاميرا. لون المسار Color لا Gradient. تحقّق من الموقع أو ضع إحداثيات ثابتة.
تُطبّق x/y وtransform بعد التخطيط. تحريك عنصر لا يدفع إخوته؛ استخدم spacing أو Spacer للفواصل. الدوران والتحجيم يؤثران في الرسم كاملًا.

الخصائص

center?"userLocation" | "dataLocation" | MapCoordinate

مصدر مركز الكاميرا: موقع المستخدم الأصلي أو موقع بيانات العداد أو إحداثيات ثابتة. الافتراضي userLocation.

مثال"userLocation"

showUserLocation?boolean

إظهار علامة موقع المستخدم الأصلية عندما يتوفر الموقع.

مثالtrue

path?ReadonlyArray<MapCoordinate | null>

إحداثيات المسار بالترتيب. تفصل null مقطعًا. تستخدم خطوط العرض والطول؛ المصفوفة الفارغة لا ترسم مسارًا.

مثال[]

pathStyle?MapPathStyle

نمط المسار الأصلي: لون Color وعرض ونهايات ووصلات وشرطات وحدود وعلامات بداية ونهاية اختيارية. التدرجات غير مدعومة.

مثال{stroke: $env.accent, lineWidth: 4, outlineStroke: $env.foreground, outlineWidth: 1}

heading?"northUp" | "vehicle" | "path" | number

اتجاه الكاميرا: northUp أو vehicle أو path أو درجات بترديد 360. يحترم اتجاه المسار فواصل المقاطع.

مثال"northUp"

regionOffset?ViewPoint

إزاحة العرض بنقاط الشاشة. تحرك x/y الموجبة النطاق يمينًا/أسفل والمحتوى يسارًا/أعلى.

مثال{x: 0, y: 0}

pitch?number

ميل الكاميرا بالدرجات؛ 0 ينظر عمودياً لأسفل.

مثال0

mapStyle?"standard" | "satellite" | "hybrid"

standard طرق، satellite صور قمرية، hybrid صور مع تسميات.

مثال"standard"

appearance?"automatic" | "light" | "dark"

automatic يتبع البيئة؛ light/dark يثبت مظهر الخريطة.

مثال"automatic"

cameraAnimation?boolean

تحريك تغييرات الكاميرا الأصلية. مفعّل افتراضيًا، عدا الإطار الأول وتقليل الحركة.

مثالtrue

الخصائص المشتركة

width?number | "auto" | "fill"

العرض بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.

مثال"fill"

height?number | "auto" | "fill"

الارتفاع بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.

مثال"fill"

x?number

إزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.

مثال0

y?number

إزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.

مثال0

transform?ViewTransform

تحويل View كله دون تغيير التخطيط. الإزاحة بالنقاط، الدوران والميل بالدرجات، المقياس 1 بلا تغيير، والمرساة 0–1.

مثال{rotation: 0}

opacity?number

عتامة View بالكامل: 0 شفاف و1 معتم.

مثال1

cornerRadius?number

نصف قطر الزوايا بالنقاط.

مثال0

clipped?boolean

قص الرسم الذي يتجاوز حدود View.

مثالfalse

clip?"rectangle" | "ellipse"

شكل القص rectangle أو ellipse؛ يقبل Material أيضاً false لتعطيله.

مثال"rectangle"

zIndex?number

ترتيب الرسم بين العناصر الشقيقة؛ القيم الأكبر في الأمام.

مثال0

animations?MapAnimation[]

تحريك تغير الخاصية. duration/delay بالثواني، from/to للنهايات، repeat/autoreverse للتكرار وwrap للدورة.

مثال[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

معرّف ثابت بين العناصر الشقيقة.

مثال عملي

function main() {
  return (
    <Map
      width={260}
      height={180}
      center={{ latitude: 31.2304, longitude: 121.4737 }}
      heading="northUp"
      showUserLocation={false}
      cameraAnimation={false}
      path={[
        { latitude: 31.2304, longitude: 121.4737 },
        { latitude: 31.232, longitude: 121.476 },
        null,
        { latitude: 31.235, longitude: 121.48 },
        { latitude: 31.237, longitude: 121.482 },
      ]}
      pathStyle={{
        stroke: $env.accent,
        lineWidth: 4,
        outlineStroke: 'white',
        outlineWidth: 1,
        showEndpoints: true,
      }}
    />
  );
}

الحركة

widthheightxyopacitycornerRadiustransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYregionOffset.xregionOffset.ypathStyle.lineWidthpathStyle.outlineWidthpathStyle.dashPhasepathStyle.strokepathStyle.outlineStroke

عند الإغفال

الجدول يوضح سلوك الإغفال المتحقق من التنفيذ؛ الأمثلة ليست افتراضيات. لنتيجة ثابتة مرر قيمة صريحة؛ الأبعاد وألوان الثيم متغيرة بحسب السياق.

الخصائص	عند الإغفال
`center`	`"userLocation"`
`heading`	`"northUp"`
`cameraAnimation`	`true`
`mapStyle`	`"standard"`
`appearance`	`"automatic"`
`showUserLocation`	`true`
`pitch`	`0`

مثال

الاستخدام

الخصائص

مثال عملي

الحركة

عند الإغفال

$data · بيانات القيادة

الحركة

في هذه الصفحة

Map

مثال

الاستخدام

الخصائص

مثال عملي

الحركة

عند الإغفال

واجهات مرتبطة

$data · بيانات القيادة

الحركة

في هذه الصفحة