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

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

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

แผนที่ที่แสดงผ่านแผนที่ 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});
}

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