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

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

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

تحديد خيار renderingType

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

  1. تحميل مكتبة RenderingType، ويمكن إجراء ذلك عند تحميل مكتبة "خرائط Google":

    const { Map, RenderingType } = await google.maps.importLibrary("maps");

  2. عند إعداد الخريطة، استخدِم الخيار 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، واختَر خيارًا (Vector أو Raster). ضَع علامة في المربّع بجانب الإمالة والتدوير لتفعيل الإمالة والدوران على الخريطة. سيتيح لك ذلك تعديل هذه القيم آليًا، ويسمح للمستخدمين أيضًا بتعديل الميل والاتجاه مباشرةً على الخريطة. إذا كان استخدام إمالة الشاشة أو الاتجاه سيؤثر سلبًا في تطبيقك، اترك مربّعَي الاختيار الميل والدوران بدون علامتَين لعدم تمكّن المستخدمين من ضبط الميل والدوران.

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

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

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