เริ่มใช้งาน

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

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

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

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

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

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

เขียนหน้า HTML

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

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

เพิ่ม JavaScript

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

  • gmp-map-3d มีพารามิเตอร์ที่ใช้ในการเริ่มต้นตำแหน่งกล้องและมุมมองเริ่มต้น
  • script มีการเรียกเพื่อโหลด Maps JavaScript API อย่าลืมแทนที่ YOUR_KEY ด้วยคีย์ API ของคุณ

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

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

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

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

ยินดีด้วย คุณเพิ่งเขียนแอปพลิเคชันโดยใช้ 3D Maps ของ Google ใน Maps JavaScript API

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

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