הוספת מפה עם סמן

במדריך הזה נסביר איך להוסיף מפה פשוטה של Google עם סמן לאפליקציה ל-iOS. המדריך מתאים למתחילים או למתקדמים ב-Swift או ב-Objective-C, עם ידע כללי ב-Xcode. למדריך מתקדם ליצירת מפות, אפשר לקרוא את המדריך למפתחים.

במדריך הזה תלמדו ליצור את המפה הבאה. הסמן ממוקם בסידני, אוסטרליה.

קבל את הקוד

משכפלים או מורידים את מאגר הדוגמאות של מפות Google ל-iOS ב-GitHub.

לחלופין, אפשר ללחוץ על הלחצן הבא כדי להוריד את קוד המקור:

הקוד שלך

Swift

import UIKit
import GoogleMaps

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        // Create a GMSCameraPosition that tells the map to display the
        // coordinate -33.86,151.20 at zoom level 6.
        let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
        let mapView = GMSMapView.map(withFrame: self.view.frame, camera: camera)
        self.view.addSubview(mapView)

        // Creates a marker in the center of the map.
        let marker = GMSMarker()
        marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
        marker.title = "Sydney"
        marker.snippet = "Australia"
        marker.map = mapView
  }
}
      

Objective-C

#import "ViewController.h"
#import <GoogleMaps/GoogleMaps.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
  // Do any additional setup after loading the view.
  // Create a GMSCameraPosition that tells the map to display the
  // coordinate -33.86,151.20 at zoom level 6.
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:6];
  GMSMapView *mapView = [GMSMapView mapWithFrame:self.view.frame camera:camera];
  mapView.myLocationEnabled = YES;
  [self.view addSubview:mapView];

  // Creates a marker in the center of the map.
  GMSMarker *marker = [[GMSMarker alloc] init];
  marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
  marker.title = @"Sydney";
  marker.snippet = @"Australia";
  marker.map = mapView;
}

@end
      

שנתחיל?

Swift Package Manager

אפשר להתקין את SDK של מפות ל-iOS באמצעות Swift Package Manager.

1. מוודאים שהסרת את כל יחסי התלות הקיימים של SDK של מפות ל-iOS.
2. פותחים חלון טרמינל ועוברים לספרייה tutorials/map-with-marker.
3. מוודאים שסביבת העבודה ב-Xcode סגורה ומריצים את הפקודות הבאות:

   sudo gem install cocoapods-deintegrate cocoapods-clean
   pod deintegrate
   pod cache clean --all
   rm Podfile
   rm map-with-marker.xcworkspace

4. פותחים את פרויקט Xcode ומוחקים את קובץ ה-Podfile.
5. עוברים אל קובץ > הוספת יחסי תלות בין חבילות.
6. מזינים את כתובת ה-URL https://github.com/googlemaps/ios-maps-sdk, מקישים על Enter כדי לשלוח את החבילה ולוחצים על Add Package.
7. יכול להיות שתצטרכו לאפס את המטמון של החבילות באמצעות קובץ > חבילות > איפוס המטמון של החבילות.

שימוש ב-CocoaPods

1. מורידים ומתקינים את Xcode בגרסה 15.0 ואילך.
2. אם עדיין לא התקנתם את CocoaPods, תוכלו להתקין אותו ב-macOS על ידי הפעלת הפקודה הבאה בטרמינל:

   sudo gem install cocoapods

3. עוברים לספרייה tutorials/map-with-marker.
4. מריצים את הפקודה pod install. הפקודה הזו תתקין את Maps SDK שצוין בקובץ Podfile, יחד עם יחסי התלות שלו.
5. מריצים את pod outdated כדי להשוות בין גרסת ה-pod המותקנת לבין עדכונים חדשים. אם מזוהה גרסה חדשה, מריצים את pod update כדי לעדכן את Podfile ולהתקין את ה-SDK העדכני ביותר. פרטים נוספים זמינים במדריך CocoaPods.
6. פותחים (לחיצה כפולה) את הקובץ map-with-marker.xcworkspace של הפרויקט כדי לפתוח אותו ב-Xcode. כדי לפתוח את הפרויקט, צריך להשתמש בקובץ .xcworkspace.

קבלת מפתח API והפעלת ממשקי ה-API הנדרשים

כדי להשלים את המדריך הזה, צריך מפתח API של Google עם הרשאה לשימוש ב-Maps SDK ל-iOS. לוחצים על הלחצן הבא כדי לקבל מפתח ולהפעיל את ה-API.

תחילת העבודה

פרטים נוספים זמינים במאמר קבלת מפתח API.

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

מוסיפים את מפתח ה-API ל-AppDelegate.swift באופן הבא:

1. שימו לב שנוספה לקובץ הצהרת הייבוא הבאה:

   import GoogleMaps

2. עורכים את השורה הבאה בשיטה application(_:didFinishLaunchingWithOptions:), ומחליפים את YOUR_API_KEY במפתח ה-API שלכם:

   GMSServices.provideAPIKey("YOUR_API_KEY")

הערה: קוד לדוגמה של המדריך המלא מוגדר לפעול כפרויקט Swift Xcode, אבל כולל דוגמאות ל-Swift ול-Objective-C.

פיתוח והרצה של האפליקציה

1. מחברים מכשיר iOS למחשב או בוחרים סימולטור בתפריט התוכנית של Xcode.
2. אם אתם משתמשים במכשיר, ודאו ששירותי המיקום מופעלים. אם משתמשים בסימולטור, בוחרים מיקום מהתפריט תכונות.
3. ב-Xcode, לוחצים על אפשרות התפריט Product/Run (או על סמל לחצן ההפעלה).
• Xcode יוצר את האפליקציה ומריץ אותה במכשיר או בסימולטור.
• אמורה להופיע מפה עם סמן שממוקד בסידני, בחוף המזרחי של אוסטרליה, בדומה לתמונה בדף הזה.

פתרון בעיות:

• אם המפה לא מופיעה, צריך לוודא שקיבלתם מפתח API והוספתם אותו לאפליקציה, כפי שמתואר למעלה. בודקים אם יש הודעות שגיאה לגבי מפתח ה-API במסוף הניפוי של Xcode.
• אם הגבלתם את מפתח ה-API לפי מזהה החבילה של iOS, עורכים את המפתח ומוסיפים את מזהה החבילה של האפליקציה: com.google.examples.map-with-marker.
• מוודאים שיש חיבור Wi-Fi או חיבור GPS טוב.
• משתמשים בכלים לניפוי באגים ב-Xcode כדי להציג יומנים ולפתור באגים באפליקציה.

הבנת הקוד

1. יוצרים מפה ומגדירים אותה בתור התצוגה ב-viewDidLoad().

   Swift

   // Create a GMSCameraPosition that tells the map to display the
   // coordinate -33.86,151.20 at zoom level 6.
   let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
   let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
   view = mapView
         

   Objective-C

   // Create a GMSCameraPosition that tells the map to display the
   // coordinate -33.86,151.20 at zoom level 6.
   GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                           longitude:151.20
                                                                zoom:6.0];
   GMSMapView *mapView = [[GMSMapView alloc] initWithFrame: CGRectZero camera:camera];
   self.view = mapView;
         

2. מוסיפים סמן למפה ב-viewDidLoad().

   Swift

   // Creates a marker in the center of the map.
   let marker = GMSMarker()
   marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
   marker.title = "Sydney"
   marker.snippet = "Australia"
   marker.map = mapView
         

   Objective-C

   // Creates a marker in the center of the map.
   GMSMarker *marker = [[GMSMarker alloc] init];
   marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
   marker.title = @"Sydney";
   marker.snippet = @"Australia";
   marker.map = mapView;
         

כברירת מחדל, SDK של מפות ל-iOS מציג את התוכן של חלון המידע כשהמשתמש מקייש על סמן. אם אתם מסתפקים בהתנהגות ברירת המחדל, אין צורך להוסיף למסמן מאזין לקליק.

מזל טוב! פיתחתם אפליקציה ל-iOS שמציגה מפה של Google עם סמן שמציין מיקום מסוים. למדתם גם איך להשתמש ב- SDK של מפות ל-iOS.

השלבים הבאים

מידע נוסף על אובייקט המפה ועל מה שאפשר לעשות עם סמנים