الطرُز

اختيار النظام الأساسي: 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',
        gestureHandling: 'COOPERATIVE',
    });

    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',
        gestureHandling: 'COOPERATIVE',
    });

    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();