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

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

แผนที่พื้นฐานของซีแอตเทิล ซานฟรานซิสโก และปารีส

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

  • โปรเจ็กต์ Google Cloud ที่เปิดใช้ 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. เพิ่มไลบรารี 3 มิติของ Maps ลงในแอป ดูวิธีการในส่วนการตั้งค่า

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

แผนที่ 3 มิติแบบมินิมอลของ โลก

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

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

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

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

    • .hybrid หรือ
    • .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(
      latitude: 40.748339,
      longitude: -73.985912,
      altitude: 211.1,
      heading: 52,
      tilt: 68,
      range: 1039
    ), mode: .hybrid)
  }
}

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

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

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

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

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

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

  1. เพิ่มตัวอย่าง Xcode

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

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

    #Preview {
  CameraDemo()
}

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

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

ยินดีด้วย

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

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