เริ่มใช้งาน

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

เมื่อดูบทแนะนำจบแล้ว คุณควรเห็นแผนที่ต่อไปนี้ในสภาพแวดล้อมการพัฒนาของคุณ

ตั้งค่าสภาพแวดล้อม

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

  1. เปิดเครื่องมือแก้ไขข้อความที่ต้องการ
  2. สร้างไฟล์ใหม่และบันทึกโดยใช้ส่วนขยาย .html (เช่น hello-p3djs.html)

เขียนหน้าเว็บ HTML

คุณต้องสร้างหน้าเว็บที่มีโครงสร้าง HTML พื้นฐานดังนี้

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

เพิ่ม JavaScript

ถัดไป คุณจะต้องเพิ่มองค์ประกอบ HTML ที่กำหนดเองเพื่อโหลดแผนที่ โค้ดมีองค์ประกอบ 2 อย่าง ดังนี้

  • gmp-map-3d มีพารามิเตอร์ที่ใช้ในการเริ่มต้น ตำแหน่งและมุมมองกล้องเริ่มต้น
  • script มีการเรียกให้โหลด Maps JavaScript API อย่าลืมแทนที่ YOUR_KEY ด้วยคีย์ API
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>

    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d mode="hybrid" center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=beta&libraries=maps3d"></script>
  </body>
</html>

เรียกใช้แอปพลิเคชัน

หากต้องการเรียกใช้แอปพลิเคชันและดูเอาต์พุต ให้ทำตามขั้นตอนต่อไปนี้

  1. บันทึกไฟล์ HTML ที่คุณสร้าง
  2. เปิดไฟล์ในเว็บเบราว์เซอร์ (คุณสามารถดับเบิลคลิกไฟล์ ลากไฟล์ลงในหน้าต่างเบราว์เซอร์ หรือคลิกขวาแล้วใช้ "เปิดด้วย")
  3. คุณควรจะเห็นแผนที่ในหน้าต่างเบราว์เซอร์ของคุณ

ยินดีด้วย คุณเพิ่งเขียนแอปพลิเคชันโดยใช้แผนที่ 3 มิติแบบภาพเสมือนจริงของ Google ใน Maps JavaScript API

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

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