نظرة عامة

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

البدء

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

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

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

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

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

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

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

بعد ذلك، عدِّل رمز إعداد الخريطة باستخدام رقم تعريف الخريطة الذي أنشأته. يمكنك العثور على أرقام تعريف الخرائط في صفحة إدارة الخرائط. قدِّم معرّف خريطة عند إنشاء مثيل للخريطة باستخدام السمة 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. مزيد من المعلومات

أمثلة

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