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

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

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

קבל את הקוד

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

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

אני רוצה לקבל את הקוד

Swift

/*
 * Copyright 2020 Google Inc. All rights reserved.
 *
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

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

/*
* Copyright 2020 Google Inc. All rights reserved.
*
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/

#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

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

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

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

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

שימוש ב-CocoaPods

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

   sudo gem install cocoapods

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

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

כדי להשלים את המדריך הזה, אתם צריכים מפתח של Google API שמורשה להשתמש ב-SDK של מפות Google ל-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 למחשב או בוחרים סימולטור מתפריט scode של Xcode.
2. אם משתמשים במכשיר, חשוב לוודא ששירותי המיקום מופעלים. אם משתמשים בסימולטור, צריך לבחור מיקום מתוך התפריט תכונות.
3. ב-Xcode, לוחצים על האפשרות מוצר/הפעלה בתפריט (או על הסמל של לחצן ההפעלה).
• Xcode יוצר את האפליקציה, ולאחר מכן מריץ את האפליקציה במכשיר או בסימולטור.
• אתה אמור לראות מפה עם סמן שמתמקד בסידני בחוף המזרחי של אוסטרליה, בדומה לתמונה בדף הזה.

פתרון בעיות:

• אם המפה לא מוצגת, עליכם לוודא שקיבלתם מפתח API ושהוספתם אותו לאפליקציה, כפי שתואר קודם. בודקים במסוף ניפוי הבאגים של Xcode אם יש הודעות שגיאה לגבי מפתח ה-API.
• אם הגבלת את מפתח ה-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 של מפות Google ל-iOS.

השלבים הבאים

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