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

نوع العرض (نقطية ومتجهة)

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

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

نوع العرض التلقائي

يختلف نوع العرض التلقائي للخريطة حسب عملية التنفيذ.

تستخدم الخرائط التي تتضمّن العنصر <gmp-map> نوع العرض المتّجه تلقائيًا.
تستخدم الخرائط التي تتضمّن عنصر <div> مع القيمة التلقائية google.maps.Map نوع العرض النقطي.

اضبط نوع العرض للخريطة إما عن طريق تحديد الخيار renderingType map أو عن طريق ضبط الخيار على رقم تعريف خريطة مرتبط. يتجاوز الخيار renderingType أي إعدادات لنوع العرض تم إجراؤها من خلال ضبط رقم تعريف خريطة.

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

استخدِم الخيار renderingType لتحديد نوع العرض النقطي أو المتّجه للخريطة (لا يلزم توفير معرّف خريطة). بالنسبة إلى الخرائط التي يتم تحميلها باستخدام عنصر div وJavaScript، يكون نوع العرض التلقائي هو google.maps.RenderingType.RASTER. اتّبِع الخطوات التالية لضبط الخيار renderingType:

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

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

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

عند ضبط نوع عرض الخريطة المتجهة، يجب ضبط خيارات الميزات المطلوبة.

لتفعيل الإمالة، اضبط خيار الخريطة tiltInteractionEnabled على true أو اتّصِل على map.setTiltInteractionEnabled(true).
لتفعيل التحريك، اضبط خيار الخريطة headingInteractionEnabled على true أو اتّصِل بـ map.setHeadingInteractionEnabled(true).

بالنسبة إلى الخرائط التي يتم تحميلها باستخدام العنصر <gmp-map>، يكون نوع العرض التلقائي هو google.maps.RenderingType.VECTOR، مع تفعيل عناصر التحكّم في الميل والاتجاه. لضبط نوع العرض باستخدام عنصر <gmp-map>، استخدِم السمة rendering-type.

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

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

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

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

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

رصد نوع العرض المستخدَم

لرصد نوع العرض المستخدَم، استدعِ الدالة getRenderingType() على عنصر الخريطة، كما هو موضّح في المثال التالي:

  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```