โมเดล

เลือกแพลตฟอร์ม: Android iOS JavaScript

โมเดลคือชิ้นงาน 3 มิติที่เพิ่มลงในฉากเพื่อแสดงวัตถุได้ แผนที่ 3 มิติใน 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();