نظرة عامة

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

البدء

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

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

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

  1. حمِّل مكتبة RenderingType، ويمكن إجراء ذلك عند تحميل مكتبة Maps:

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

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

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

أمثلة

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