نظرة عامة

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

البدء

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

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

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

  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. مزيد من المعلومات

أمثلة

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