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

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

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

קבל את הקוד

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

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

הקוד שלך

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
  }
}
      

#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
      

שנתחיל?

קבלת מפתח 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")

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

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.

השלבים הבאים

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