الطرُز

اختيار النظام الأساسي: Android iOS JavaScript

النماذج هي مواد عرض ثلاثية الأبعاد يمكن إضافتها إلى المشهد لتمثيل الكائنات. تتيح "الخرائط الثلاثية الأبعاد" في Maps JavaScript API تضمين نماذج بتنسيق gLTF. يمكن تغيير حجم هذه النماذج وتدويرها للسماح بمزيد من التخصيص.

يجب أن تتوافق النماذج مع الخصائص الأساسية لـ glTF PBR. لا تتوافق النماذج مع أي إضافات أو خصائص إضافات.

إضافة نموذج

يأخذ Model3DElement المنشئ مجموعة من Model3DElementOptions تحدّد إحداثيات LatLng النموذج ومجموعة من المَعلمات التي تساعد في تحديد موضع النموذج.

تتوافق النماذج مع الخيارات التالية:

  • position: موضع النموذج معبَّرًا عنه بإحداثيات LatLng
  • orientation: تدوير نظام إحداثيات النموذج يتم تطبيق عمليات التدوير بالترتيب التالي: الانحراف، ثم الميل، ثم الاتجاه.
  • scale: تغيير حجم النموذج في مساحة إحداثياته القيمة التلقائية هي 1.
  • altitudeMode: كيفية تفسير الارتفاع المعبَّر عنه في position
  • src: عنوان URL للنموذج

يوضّح المثال التالي كيفية إضافة نموذج إلى الخريطة وتعديله باستخدام بعض خيارات التخصيص المتاحة:

async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
    });

    const model = new Model3DElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    document.body.append(map);
    map.append(model);
}

void init();

إضافة نموذج تفاعلي

تتيح النماذج أيضًا التفاعل. يغيّر المثال التالي حجم النموذج عند النقر عليه.

async function init() {
    // Import the needed libraries.
    const { Map3DElement, Model3DInteractiveElement } =
        await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: 39.1178, lng: -106.4452, altitude: 4395.4952 },
        range: 1500,
        tilt: 74,
        heading: 0,
        mode: 'HYBRID',
    });

    const model = new Model3DInteractiveElement({
        src: 'https://maps-docs-team.web.app/assets/windmill.glb',
        position: { lat: 39.1178, lng: -106.4452, altitude: 4495.4952 },
        orientation: { heading: 0, tilt: 270, roll: 90 },
        scale: 0.15,
        altitudeMode: 'CLAMP_TO_GROUND',
    });

    model.addEventListener('gmp-click', function () {
        this.scale = Math.random() * (0.5 - 0.1) + 0.1;
    });

    document.body.append(map);
    map.append(model);
}

void init();