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

בחירת פלטפורמה: Android iOS JavaScript

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

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

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

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

הערה: אפשר גם לשנות את הגובה היחסי של המצלמה באמצעות הטיה וטווח.

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

חלק 5: תצוגה מקדימה והפעלת האפליקציה

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

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

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

   #Preview {
     ContentView()
   }
   

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

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

מצבי טעינה ושגיאה של המפה

‫Maps 3D SDK ל-iOS מציג באופן אוטומטי משוב חזותי מובנה בזמן ניהול המצב של Map:

• שכבת-על של טעינה: אינדיקטור התקדמות ממורכז מוצג כשתצוגת המפה מאותחלת או נטענת בפעם הראשונה.
• שכבת-על של שגיאה: שכבת-על של שגיאה מוצגת אם המפה לא נטענת.

אם אתם מחילים עיצוב מפה מבוסס-ענן באמצעות style(mapID:error:) ב-Map, אתם יכולים להעביר סגירת error כדי לטפל בשגיאות בטעינת העיצוב.

האזנה לאירועי הקשה על המפה

כדי להאזין לאירועי הקשה במפה, מחילים את המשתנה 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)")
  }

מעולה!

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

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