ภาพรวม

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

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

ต่อไปนี้คือตัวอย่างสิ่งที่คุณทำได้ด้วยแผนที่ 3 มิติใน Maps JavaScript API

เหตุผลที่ควรใช้แผนที่ 3 มิติใน Maps JavaScript

แผนที่ 3 มิติใน Maps JavaScript มีคลาส Map3DElement (<gmp-map-3d>) ในไลบรารี maps3d เพื่อให้คุณใช้ภาพ 3 มิติของ Google ในแอปพลิเคชันต่างๆ ได้ แผนที่ 3 มิติจะมอบประสบการณ์การแสดงผล 3 มิติในตัว ซึ่งช่วยให้คุณรวมหรือทดสอบสภาพแวดล้อมในโลกจริง มุมมองเมือง และทัวร์ชมสถานที่สำคัญแบบ 3 มิติได้

ใช้ 3D <gmp-map-3d> (Map3DElement ในไลบรารี maps3d) สำหรับภูมิประเทศ 3 มิติ, การเอียงกล้อง, การบินเหนือศีรษะ, การบินเหนือศีรษะในระยะไกล, สิ่งปลูกสร้าง 3 มิติที่ยื่นออกมา และวัตถุ 3 มิติ เช่น Marker3DElement (<gmp-marker-3d>) สำหรับแผนที่ถนน 2 มิติแบบแบน, หมุด 2 มิติมาตรฐาน AdvancedMarkerElement และการจัดรูปแบบเวกเตอร์ 2 มิติ ให้ใช้ 2D <gmp-map> (MapElement หรือ google.maps.Map ในไลบรารี maps)

คุณทำอะไรได้บ้างด้วยแผนที่ 3 มิติใน Maps JavaScript

• สร้างประสบการณ์ Maps Experiments ในโลกจริง: แสดงภาพถ่ายทางอากาศ 3 มิติที่สมจริงของเมือง ภูมิประเทศ และจุดสังเกตในโหมด SATELLITE หรือ HYBRID (ซึ่งวางซ้อนป้ายกำกับแผนที่ฐานบนภาพถ่ายจากดาวเทียม) หรือแสดงแผนที่ฐาน 3 มิติที่มีสไตล์ในโหมด ROADMAP โดยใช้พร็อพเพอร์ตี้ mode ดูข้อมูลเพิ่มเติมได้ที่เปลี่ยนโหมดแผนที่
• ปรับแต่งรูปแบบของแผนที่
  • การจัดรูปแบบแผนที่ในระบบคลาวด์แบบ 3 มิติ: ควบคุมระดับการเข้าถึงและการจัดรูปแบบจุดที่น่าสนใจ (POI) และถนนในแผนที่ฐาน ดูข้อมูลเพิ่มเติมได้ที่ปรับแต่งแผนที่ 3 มิติ
  • เครื่องหมาย, ป๊อปโอเวอร์, เส้นประกอบ และรูปหลายเหลี่ยมที่กำหนดเอง: ระบุตำแหน่งและวาดเส้นทางหรือขอบเขต 3 มิติบนแผนที่โดยใช้ MarkerElement, Marker3DElement, Marker3DInteractiveElement, PopoverElement, Polyline3DElement และ Polygon3DElement ดูข้อมูลเพิ่มเติมได้ที่เครื่องหมาย ป๊อปโอเวอร์ และรูปร่างและเส้น
  • โมเดล 3 มิติและชิ้นงาน glTF: เพิ่มโมเดล 3 มิติ glTF PBR ที่กำหนดเองของอาคาร สถานที่สำคัญ หรือวัตถุที่พิกัดในโลกจริงโดยใช้ Model3DElement ดูข้อมูลเพิ่มเติมได้ที่โมเดล
• สร้างแผนที่ที่สมจริง
  • เส้นทางกล้องที่กำหนดไว้ล่วงหน้า: นำทางผู้ใช้ผ่านแผนที่ 3 มิติด้วยภาพเคลื่อนไหวแบบบินผ่านและแบบวงโคจรของกล้องที่กำหนดไว้ล่วงหน้าโดยใช้ flyCameraTo และ flyCameraAround ดูข้อมูลเพิ่มเติมได้ที่สร้างภาพเคลื่อนไหวเส้นทางกล้อง
  • ควบคุมการโต้ตอบของผู้ใช้: ปรับแต่งการควบคุมและการเคลื่อนไหวของกล้องที่ผู้ใช้ใช้ได้ ดูข้อมูลเพิ่มเติมได้ที่การควบคุมและการสำรวจแผนที่ 3 มิติ, จำกัดมุมมองและขอบเขตของกล้อง และควบคุมตำแหน่งของกล้อง

ตัวอย่างแบบรวดเร็ว

หากต้องการโหลดไลบรารี maps3d และแสดงผลองค์ประกอบ <gmp-map-3d> ด้วย mode="HYBRID", center (lat,lng,altitude), range, tilt และ heading ให้ใช้ข้อมูลโค้ดต่อไปนี้

<gmp-map-3d
  style="height: 400px; width: 100%;"
  mode="HYBRID"
  center="40.7484,-73.9857,200"
  range="900"
  tilt="67"
  heading="35">
</gmp-map-3d>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>

แทนที่ YOUR_API_KEY ด้วยคีย์ Google Maps Platform API

วิธีใช้แผนที่ 3 มิติใน Maps JavaScript

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

ความครอบคลุม

เมชสิ่งปลูกสร้าง 3 มิติและสถานที่สำคัญที่สมจริงพร้อมใช้งานในเขตเมืองบางแห่งในประเทศและภูมิภาคที่รองรับ ในภูมิภาคที่ไม่มีการครอบคลุมของเมช 3 มิติ (เช่น อินเดีย) <gmp-map-3d> จะแสดงภาพถ่ายจากดาวเทียมหรือภาพแผนที่ถนนแบบ 2 มิติที่วางทับบนระดับความสูงของภูมิประเทศแบบ 3 มิติโดยไม่มีสิ่งปลูกสร้าง 3 มิติที่ยื่นออกมา หากต้องการแสดงสถานที่สำคัญในพื้นที่ที่ไม่มีการครอบคลุมของ Mesh 3 มิติ คุณสามารถวางโมเดล 3 มิติ glTF ที่กำหนดเองที่พิกัดของสถานที่นั้นโดยใช้ Model3DElement หรือใช้ <gmp-map> แบบ 2 มิติ ดูความพร้อมให้บริการในแต่ละประเทศ (ในคอลัมน์ Maps JavaScript 3D) ได้ที่รายละเอียดความครอบคลุมของ Google Maps Platform

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

• ดูคู่มือเริ่มต้นใช้งานเพื่อสร้าง "Hello, World!" แผนที่ 3 มิติ
• ลองใช้ Codelab เบื้องต้นเพื่อดูวิธีเพิ่มฟีเจอร์ลงในแผนที่
• เพิ่มพูนความรู้เกี่ยวกับเครื่องหมายและภาพเคลื่อนไหวใน Codelab ถัดไป
• เรียกดูคอลเล็กชันตัวอย่างของ Google เพื่อค้นหาตัวอย่างที่เหมาะกับ Use Case ของคุณ