เพิ่มแผนที่ 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: เพิ่มแผนที่

แผนที่โลก 3 มิติแบบเรียบง่าย

  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),
      altitudeMode: .relativeToGround
    ), mode: .hybrid)
  }
}

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

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

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

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

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

แผนที่ 3 มิติพื้นฐานของนิวยอร์กซิตี้

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

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

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

    #Preview {
  CameraDemo()
}

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

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

ยินดีด้วย

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

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