เพิ่มแผนที่ 3 มิติลงในแอป

หน้านี้จะอธิบายตัวอย่างวิธีเพิ่มแผนที่ 3 มิติพื้นฐานลงในแอป iOS โดยใช้ Maps 3D SDK สำหรับ iOS คำแนะนำในหน้านี้จะถือว่าคุณได้ ทำตามขั้นตอนในหน้า การตั้งค่าเรียบร้อยแล้วและมีสิ่งต่อไปนี้

• โปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google ที่เปิดใช้ Maps 3D SDK สำหรับ iOS
• คีย์ API สำหรับ Maps 3D SDK สำหรับ iOS
• Xcode เวอร์ชัน 16.0 ขึ้นไปพร้อมกับแพ็กเกจ Maps 3D SDK สำหรับ iOS ที่เพิ่มแล้ว

ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อกำหนดเบื้องต้นเหล่านี้ได้ที่ การตั้งค่า

ทำตาม Codelab ที่ซับซ้อนมากขึ้น

ดูตัวอย่างโค้ดเพิ่มเติมได้ที่ GitHub

ส่วนที่ 1: สร้างแอป SwiftUI พื้นฐาน

1. สร้างแอปใหม่ใน Xcode
2. ตั้งค่าชื่อผลิตภัณฑ์ เป็น Hello3DWorld โดยตั้งค่าตัวระบุองค์กรเป็น com.example ชื่อแพ็กเกจควรเป็น com.example.Hello3DWorld
3. เลือกอินเทอร์เฟซ SwiftUI
4. เพิ่มไลบรารี Maps 3D ลงในแอป ดูวิธีการในส่วนการตั้งค่า section

ส่วนที่ 2: เพิ่มแผนที่

1. เปิดไฟล์ที่ชื่อว่า ContentView.swift ซึ่งเป็นจุดแรกเข้าและการนำทางหลักของแอป

2. นำเข้า SwiftUI และแพ็กเกจ GoogleMaps3D

3. แทนที่โค้ดทั้งหมดภายในประกาศเนื้อหาด้วย Map(mode: .hybrid)

   การกำหนดค่าเริ่มต้นขั้นต่ำที่คุณต้องระบุเพื่อเริ่มต้น Map คือ MapMode

   • .hybrid
   • .roadmap หรือ
   • .satellite

   ไฟล์ ContentView.swift ควรมีลักษณะดังนี้

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   
   #Preview {
     ContentView()
   }
   

ส่วนที่ 3: ตั้งค่าคีย์ API

1. คุณต้องตั้งค่าคีย์ API ก่อนที่แผนที่จะเริ่มต้น โดยตั้งค่า Map.apiKey ในตัวจัดการเหตุการณ์ init() ของ View ที่มีแผนที่

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
   
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   

ส่วนที่ 4: ใช้กล้องเพื่อควบคุมมุมมองแผนที่

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

1. เปลี่ยนการเรียกใช้ฟังก์ชัน Map() ให้รวมพร็อพเพอร์ตี้ initialCamera เริ่มต้น initialCamera เพื่อแสดงมุมมองของย่านใจกลางแมนฮัตตัน

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
     var body: some View {
       Map(initialCamera: .init(
         center: .init(latitude: 40.748339, longitude: -73.985912, altitude: 211.1),
         heading: 52,
         tilt: 68,
         roll: 0.0,
         range: 1039,
         fieldOfView: .degrees(50)
       ), mode: .hybrid)
     }
   }
   

โค้ดด้านบนจะตั้งค่าสำหรับพารามิเตอร์ต่อไปนี้

• center: LatLngAltitude ที่แสดงตำแหน่งกล้อง
• heading: ทิศทางเป็นองศาจากทิศเหนือเพื่อชี้กล้องไปทาง
• tilt: มุมเอียงเป็นองศา โดย 0 คือเหนือศีรษะโดยตรง และ 90 คือมองในแนวนอน
• roll: มุมหมุนรอบระนาบแนวตั้งของกล้องเป็นองศา
• range: ระยะทางเป็นเมตรของกล้องจากตำแหน่งละติจูด ลองจิจูด
• fieldOfView: มุมที่แสดงขอบเขตการมองเห็นของกล้อง

หากคุณไม่ได้ระบุพารามิเตอร์เพิ่มเติมเหล่านี้ ระบบจะใช้ค่าเริ่มต้น

หากต้องการให้มุมมองกล้องแสดงข้อมูล 3 มิติมากขึ้น ให้ตั้งค่าพารามิเตอร์เริ่มต้นเพื่อแสดงมุมมองที่ใกล้ขึ้นและเอียง

ส่วนที่ 5: แสดงตัวอย่างและเรียกใช้แอป

1. เพิ่มการแสดงตัวอย่าง Xcode

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

   หากต้องการเพิ่มการแสดงตัวอย่าง ให้เพิ่มบล็อกโค้ด #Preview {} นอกโครงสร้าง

   #Preview {
     ContentView()
   }
   

2. เรียกใช้แอป

สร้างและเรียกใช้แอป

สถานะการโหลดและสถานะข้อผิดพลาดของแผนที่

Maps 3D SDK สำหรับ iOS จะแสดงความคิดเห็นด้วยภาพในตัวโดยอัตโนมัติขณะ จัดการสถานะของ Map ดังนี้

• ภาพซ้อนทับการโหลด: ตัวบ่งชี้ความคืบหน้าตรงกลางจะแสดงขึ้นเมื่อมีการเริ่มต้นหรือโหลดมุมมองแผนที่เป็นครั้งแรก
• ภาพซ้อนทับข้อผิดพลาด: ภาพซ้อนทับข้อผิดพลาดจะแสดงขึ้นหากแผนที่โหลดไม่สำเร็จ

หากคุณใช้รูปแบบแผนที่ในระบบคลาวด์โดยใช้ style(mapID:error:) บน Map คุณ จะส่งการปิด error เพื่อจัดการข้อผิดพลาดในการโหลดรูปแบบได้

รอรับเหตุการณ์การแตะแผนที่

หากต้องการรอรับเหตุการณ์การแตะบนแผนที่ ให้ใช้ตัวแก้ไข onTap(_:) กับ Map เมื่อผู้ใช้แตะแผนที่ การปิดจะได้รับค่า MapTapInfo ที่ระบุ location (LatLngAltitude) และ content ที่แตะ (MapTapInfo.Content.map หรือ MapTapInfo.Content.place(id:)) ดูข้อมูลเพิ่มเติมเกี่ยวกับการโต้ตอบกับจุดสนใจได้ที่ โต้ตอบกับจุดสนใจ

Map(mode: .hybrid)
  .onTap { tapInfo in
    print("Tapped at \(tapInfo.location), content: \(tapInfo.content)")
  }

ยินดีด้วย

คุณเพิ่มแผนที่ 3 มิติลงในแอปเรียบร้อยแล้ว

จากนั้น คุณสามารถสำรวจฟีเจอร์ขั้นสูงเพิ่มเติมของ Maps 3D SDK สำหรับ iOS เช่น แอนิเมชันเส้นทางกล้อง, เครื่องหมาย 3 มิติ หรือ รูปหลายเหลี่ยม