การควบคุมและการสำรวจแผนที่ 3 มิติ

ภาพรวมการควบคุม

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

แผนที่ 3 มิติที่เหมือนจริงใน Maps JavaScript API ยังรองรับการนําทางผู้ใช้ไปรอบๆ แผนที่โดยใช้เส้นทางของกล้องที่กำหนดไว้ล่วงหน้า คุณปรับแต่งและรวมเส้นทางเหล่านี้เพื่อสร้างประสบการณ์ 3 มิติที่สมบูรณ์ได้

การควบคุมการสํารวจ

รูปภาพต่อไปนี้แสดงชุดการควบคุมเริ่มต้นที่แสดงโดยแผนที่ 3 มิติที่เหมือนจริงใน Maps JavaScript API

รูปภาพแผนที่ที่มีการควบคุม

ด้านล่างนี้คือรายการการควบคุมทั้งหมดในแผนที่ 3 มิติที่เหมือนภาพถ่ายใน Maps JavaScript

  • ตัวควบคุมการซูมจะแสดงปุ่ม "+" และ "-" สำหรับเปลี่ยนระดับการซูมของแผนที่
  • การควบคุมการเอียงช่วยให้คุณเปลี่ยนการเอียงของกล้องได้
  • การควบคุมการหมุนช่วยให้คุณเปลี่ยนทิศทางของกล้องได้
  • ตัวควบคุมการย้ายจะแสดงปุ่ม "←", "→", "↑" และ "↓" สำหรับเปลี่ยนจุดศูนย์กลางของแผนที่

ตัวอย่างโค้ดต่อไปนี้แสดงการเปิด/ปิดการควบคุมการสํารวจ

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIDisabled: true,
});

HTML

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

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

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

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

  • ภาพเคลื่อนไหว 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 },
      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,
    rounds: 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-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

ขั้นตอนถัดไป