การควบคุมและการสำรวจแผนที่ 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,
  defaultUIHidden: 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>

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