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

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

หน้านี้จะอธิบายตัวอย่างวิธีเพิ่มแผนที่ 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 ลงในแอป ดูวิธีการในส่วนการตั้งค่า

ส่วนที่ 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 ที่มีแผนที่

   คำเตือน: อย่าตรวจสอบคีย์ API ในการควบคุมแหล่งที่มาภายนอกหรือสาธารณะ

   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 Preview

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

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

   #Preview {
     ContentView()
   }
   

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

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

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

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

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

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

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

หากต้องการฟังเหตุการณ์การแตะบนแผนที่ ให้ใช้ตัวปรับแต่ง onTap(_:) กับ Map เมื่อผู้ใช้แตะแผนที่ Closure จะได้รับค่า 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 มิติ หรือรูปหลายเหลี่ยม