حزمة أدوات Places UI Kit: هي مكتبة جاهزة للاستخدام تتيح للمطوّرين إمكانية التخصيص والتحكّم. ننصحك بتجربتها ومشاركة ملاحظاتك حول تجربتك مع حزمة واجهة المستخدم.

تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

نظرة عامة

تتيح لك الميزات المستندة إلى WebGL في Maps JavaScript API التحكّم في الميلان والتدوير، وإضافة عناصر ثلاثية الأبعاد مباشرةً إلى الخريطة، وغير ذلك. تتضمّن هذه الحزمة الميزات التالية:

يتيح لك العرض المركّب باستخدام WebGL إضافة رسومات ثنائية وثلاثية الأبعاد ومحتوى متحرك مخصّص إلى خرائطك.
يمكن الآن تعديل الإمالة والاتجاه آليًا وباستخدام إيماءات الماوس ولوحة المفاتيح.
تتيح لك الدالة map.moveCamera() تغيير عدة خصائص للكاميرا في الوقت نفسه.
يتيح Zoom الآن استخدام القيم الكسرية.

البدء

لاستخدام ميزات WebGL الجديدة، يجب استخدام خريطة متّجهة. يوضح لك هذا القسم كيفية القيام بذلك.

تحديد خيار `renderingType`

استخدِم الخيار renderingType لتحديد نوع العرض النقطي أو المتجهي لخريطتك (لا يلزم توفّر معرّف خريطة):

حمِّل مكتبة RenderingType، ويمكن إجراء ذلك عند تحميل مكتبة "خرائط Google":
```
const { Map, RenderingType } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
```

عند إعداد الخريطة، استخدِم الخيار renderingType لتحديد RenderingType.VECTOR أو RenderingType.RASTER:

map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    renderingType: RenderingType.VECTOR,
  }
);

يتجاوز الخيار renderingType أي إعدادات لنوع العرض تم ضبطها من خلال إعداد معرّف خريطة.

لتفعيل الإمالة والتدوير، اضبط خيار الخريطة tiltInteractionEnabled على true أو استدعِ map.setTiltInteractionEnabled.
لتفعيل العرض الشامل، اضبط خيار الخريطة headingInteractionEnabled على true أو استدعِ map.setHeadingInteractionEnabled.

استخدام معرّف خريطة لضبط نوع العرض

يمكنك أيضًا تحديد نوع العرض باستخدام معرّف خريطة. لإنشاء معرّف خريطة جديد، اتّبِع الخطوات الواردة في استخدام ميزة "تصميم الخرائط باستخدام السحابة الإلكترونية" - الحصول على معرّف خريطة. احرص على ضبط نوع الخريطة على JavaScript، وحدِّد خيار المتّجه. ضَع علامة في المربّع إمالة أو تدوير لتفعيل الإمالة والتدوير على الخريطة. يتيح لك ذلك تعديل هذه القيم آليًا، كما يتيح للمستخدمين تعديل الإمالة والاتجاه مباشرةً على الخريطة. إذا كان استخدام الإمالة أو الاتجاه سيؤثر سلبًا في تطبيقك، اترُك المربّعين الإمالة والتدوير بدون وضع علامة فيهما حتى لا يتمكّن المستخدمون من ضبط الإمالة والتدوير.

إنشاء معرّف خريطة اتجاهية

بعد ذلك، عدِّل رمز تهيئة الخريطة باستخدام معرّف الخريطة الذي أنشأته. يمكنك العثور على معرّفات الخرائط في صفحة إدارة خرائط Google. قدِّم رقم تعريف خريطة عند إنشاء مثيل للخريطة باستخدام السمة mapId كما هو موضّح هنا:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID'
});

استخدام العنصر `<gmp-map>`

يتم تفعيل الخرائط الاتجاهية والإمالة والاتجاه تلقائيًا عند استخدام العنصر <gmp-map>، ما يتيح لك إضافة خريطة إلى صفحتك باستخدام HTML. مزيد من المعلومات

أمثلة

تم تقديم أمثلة لتوضيح هذه الميزات: