สร้างภาพเคลื่อนไหวเส้นทางกล้อง

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

คุณเพิ่มภาพเคลื่อนไหวเส้นทางกล้องลงในแผนที่ 3 มิติเพื่อให้ผู้ใช้ได้รับประสบการณ์ที่สมจริงยิ่งขึ้นได้ ภาพเคลื่อนไหวเส้นทางกล้องสามารถบินไปยังหรือบินรอบจุดบนแผนที่

ตัวอย่างต่อไปนี้รวมภาพเคลื่อนไหว flyCameraTo และ flyCameraAround

เส้นทางกล้องที่กำหนดล่วงหน้า

แผนที่ 3 มิติใน Maps JavaScript มีเส้นทางกล้องที่กำหนดไว้ล่วงหน้า 2 เส้นทาง คุณปรับแต่งเส้นทางกล้องได้โดยเปลี่ยนระยะเวลาของภาพเคลื่อนไหว (ซึ่งจะเพิ่มหรือลดความเร็ว) หรือโดยการรวมเส้นทางกล้องเพื่อสร้างประสบการณ์ที่เหมือนภาพยนตร์มากขึ้น นอกจากนี้ คุณยังควบคุมความสูงของกล้องได้โดยระบุaltitudeMode

แผนที่ 3 มิติใน Maps JavaScript API รองรับเส้นทางกล้องต่อไปนี้

• flyCameraTo ภาพเคลื่อนไหวจะบินจากกึ่งกลางแผนที่ไปยัง ปลายทางที่ระบุ
• flyCameraAround ภาพเคลื่อนไหวจะหมุนรอบจุดบนแผนที่ตามจำนวนรอบที่ระบุ

คุณอาจรวมเส้นทางที่มีอยู่ 2 เส้นทางเพื่อบินไปยังจุดที่น่าสนใจ หมุน รอบจุดนั้น แล้วหยุดเมื่อระบุ

บินไปที่

ตัวอย่างโค้ดต่อไปนี้แสดงการเคลื่อนไหวของกล้องให้บินไปยัง ตำแหน่ง

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

บินไปรอบๆ

ตัวอย่างโค้ดต่อไปนี้แสดงการเคลื่อนไหวของกล้องให้บินไปรอบๆ สถานที่

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 1
  });
}

รวมภาพเคลื่อนไหว

ตัวอย่างโค้ดต่อไปนี้แสดงการรวมภาพเคลื่อนไหวเพื่อบินกล้องไปยัง ตำแหน่ง แล้วหมุนรอบตำแหน่งเมื่อภาพเคลื่อนไหวแรกสิ้นสุด

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}