הוספת מפה תלת-ממדית לאפליקציה

בדף הזה מוסבר באמצעות דוגמה איך להוסיף מפה תלת-ממדית בסיסית לאפליקציית 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. מוסיפים את ספריית Maps 3D לאפליקציה. הוראות מפורטות מופיעות בקטע ההגדרה.

חלק 2: הוספת מפה

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: שימוש במצלמה לשליטה בתצוגת המפה

תצוגות מפה בתלת-ממד נשלטות על ידי המחלקה 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: הגובה של המצלמה מעל פני הים.

אם לא תספקו אף אחד מהפרמטרים הנוספים האלה, המערכת תשתמש בערך ברירת מחדל.

כדי להציג יותר נתונים תלת-ממדיים בתצוגה מהמצלמה, מגדירים את הפרמטרים הראשוניים כך שיוצג מבט קרוב יותר ומוטה.

חלק 6: תצוגה מקדימה והרצת האפליקציה

1. הוספת תצוגה מקדימה של Xcode

   תצוגות מקדימות הן תכונה יעילה ב-Xcode שמאפשרת לכם לראות את האפליקציה ולבצע בה פעולות בלי להשתמש בסימולטור או במכשיר חיצוני.

   כדי להוסיף תצוגה מקדימה, מוסיפים בלוק קוד #Preview {} מחוץ למבנה.

   #Preview {
     CameraDemo()
   }
   

2. הפעלת האפליקציה

מפתחים ומריצים את האפליקציה.

מעולה!

הוספת בהצלחה מפה תלת-ממדית לאפליקציה!

אחרי כן, תוכלו לנסות תכונות מתקדמות יותר של Maps 3D SDK ל-iOS, כמו אנימציות של נתיב המצלמה, סמנים בתלת-ממד או מצולעים.