סמנים

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

סמנים מציינים מיקומים בודדים במפה.

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

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

הוספת סמן

כדי להוסיף סמן, צריך ליצור אובייקט GMSMarker שכולל position ואת title, ולהגדיר את map שלו.

הדוגמה הבאה ממחישה איך להוסיף סמן לאובייקט GMSMapView קיים. הסמן נוצר בקואורדינטות 10,10 ומציג את המחרוזת "שלום עולם" בחלון מידע כשלוחצים עליה.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;
      

אפשר להוסיף סמנים חדשים למפה כדי להוסיף אנימציה למפה על ידי הגדרת המאפיין marker.appearAnimation כך:

• kGMSMarkerAnimationPop כדי לגרום לסמן לקפוץ מה-groundAnchor שלו כשמוסיפים אותו.
• kGMSMarkerAnimationFadeIn כדי לגרום לעמעום של הסמן כשמוסיפים אותו.

הסרת סמן

ניתן לך להסיר סמן מהמפה על ידי הגדרת המאפיין map של GMSMarker ל-nil. לחלופין, אפשר להסיר את כל שכבות-העל (כולל סמנים) שנמצאות כרגע במפה על ידי קריאה לשיטה GMSMapView clear.

Swift

let camera = GMSCameraPosition.camera(
  withLatitude: -33.8683,
  longitude: 151.2086,
  zoom: 6
)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
// ...
mapView.clear()
      

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
// ...
[mapView clear];
      

אם אתם רוצים לבצע שינויים בסמן אחרי שהוספתם אותו למפה, הקפידו ללחוץ לחיצה ארוכה על האובייקט GMSMarker. אפשר לשנות את הסמן מאוחר יותר על ידי ביצוע שינויים באובייקט.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
// ...
marker.map = nil;
      

שינוי צבע הסמן

אפשר להתאים אישית את הצבע של תמונת הסמן שמוגדרת כברירת המחדל על ידי בקשת גרסה בגוון של סמל ברירת המחדל עם markerImageWithColor:, והעברת התמונה שמתקבלת למאפיין הסמל של GMSMarker.

Swift

marker.icon = GMSMarker.markerImage(with: .black)
      

Objective-C

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];
      

התאמה אישית של תמונת הסמן

אם רוצים לשנות את תמונת ברירת המחדל של הסמן, אפשר להגדיר סמל מותאם אישית באמצעות המאפיין icon או iconView של הסמן. אם מוגדר iconView, ה-API מתעלם מהנכס icon.

שימוש במאפיין icon של הסמן

קטע הקוד הבא יוצר סמן עם סמל מותאם אישית שמוגדר כ-UIImage בנכס icon. הסמל מוצג במרכז לונדון, אנגליה. קטע הקוד מניח שהאפליקציה שלכם מכילה תמונה בשם "house.png".

Swift

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: positionLondon)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView
      

Objective-C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:positionLondon];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

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

התמונה הזו יכולה לכלול כמה פריימים. בנוסף, המאפיין alignmentRectInsets מכובד, וזה שימושי אם לסמן יש צל או אזור אחר שלא ניתן לשימוש.

שימוש במאפיין iconView של הסמן

קטע הקוד הבא יוצר סמן עם סמל מותאם אישית על ידי הגדרת המאפיין iconView של הסמן, ויוצר אנימציה של שינוי בצבע הסמן. קטע הקוד מניח שהאפליקציה שלכם מכילה תמונה בשם "house.png".

Swift

import CoreLocation
import GoogleMaps

class MarkerViewController: UIViewController, GMSMapViewDelegate {
  var mapView: GMSMapView!
  var london: GMSMarker?
  var londonView: UIImageView?

  override func viewDidLoad() {
    super.viewDidLoad()

    let camera = GMSCameraPosition.camera(
      withLatitude: 51.5,
      longitude: -0.127,
      zoom: 14
    )
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    view = mapView

    mapView.delegate = self

    let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
    let markerView = UIImageView(image: house)
    markerView.tintColor = .red
    londonView = markerView

    let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
    let marker = GMSMarker(position: position)
    marker.title = "London"
    marker.iconView = markerView
    marker.tracksViewChanges = true
    marker.map = mapView
    london = marker
  }

  func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
    UIView.animate(withDuration: 5.0, animations: { () -> Void in
      self.londonView?.tintColor = .blue
    }, completion: {(finished) in
      // Stop tracking view changes to allow CPU to idle.
      self.london?.tracksViewChanges = false
    })
  }
}
      

Objective-C

@import CoreLocation;
@import GoogleMaps;

@interface MarkerViewController : UIViewController <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation MarkerViewController {
  GMSMarker *_london;
  UIImageView *_londonView;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;

  _mapView.delegate = self;

  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];

  CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

- (void)mapView:(GMSMapView *)mapView idleAtCameraPosition:(GMSCameraPosition *)position {
  [UIView animateWithDuration:5.0
                   animations:^{
    self->_londonView.tintColor = [UIColor blueColor];
  }
                   completion:^(BOOL finished) {
    // Stop tracking view changes to allow CPU to idle.
    self->_london.tracksViewChanges = NO;
  }];
}

@end
      

מכיוון ש-iconView מקבל UIView, יש לך היררכיה של פקדים סטנדרטיים של ממשק המשתמש שמגדירים את הסמנים, ולכל תצוגה יש קבוצה סטנדרטית של יכולות אנימציה. אפשר לכלול שינויים בגודל, בצבע וברמות האלפא של הסמן, וגם להחיל טרנספורמציות שרירותיות. המאפיין iconView תומך באנימציה של כל מאפייני האנימציה של UIView, מלבד frame ו-center.

כדאי לשים לב לשיקולים הבאים כשמשתמשים ב-iconView:

• UIView עלול להיות תובעני של משאבים כאשר tracksViewChanges מוגדר ל-YES, מה שעלול לגרום לשימוש מוגבר בסוללה. לעומת זאת, פריים יחיד UIImage הוא סטטי ואין צורך לעבד אותו מחדש.
• אם יש הרבה סמנים במסך, ולכל סמן יש UIView משלו וכל הסמנים עוקבים אחר שינויים באותו הזמן.
• קובץ iconView לא מגיב לאינטראקציה של המשתמש, כי הוא תמונת מצב של התצוגה.
• התצוגה מתנהגת כאילו clipsToBounds מוגדר ל-YES, ללא קשר לערך שלה בפועל. אפשר להחיל טרנספורמציות שפועלות מחוץ לגבולות, אבל האובייקט ששרטט חייב להיות בתוך גבולות האובייקט. כל ההמרות או השינויים מנוטרים ומיושמים. בקצרה: תתי-תצוגות חייבות להיות בתוך התצוגה.

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

• אם צריך לבצע סדרה של שינויים, אפשר לשנות את הנכס ל-YES ואז לחזור ל-NO.
• כשהאנימציה פועלת או שהתוכן נטען באופן אסינכרוני, צריך להשאיר את ההגדרה של המאפיין ל-YES עד שהפעולות יושלמו.

שינוי שקיפות הסמן

אפשר לשלוט בשקיפות של סמן באמצעות המאפיין opacity שלו. יש לציין את האטימות כסימן צף בין 0.0 ל-1.0, כאשר 0 הוא שקוף לחלוטין ו-1 אטום לחלוטין.

Swift

marker.opacity = 0.6
      

Objective-C

marker.opacity = 0.6;
      

אפשר להוסיף אנימציה של אטימות הסמן באמצעות [Core Animation]אנימציה באמצעות GMSMarkerLayer.

טשטוש סמן

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

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

כדי לשנות את כיוון הסמן, מגדירים את מאפיין flat של הסמן YES או כ-true.

Swift

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView
      

Objective-C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon];
londonMarker.flat = YES;
londonMarker.map = mapView;
      

סיבוב סמן

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

הדוגמה הבאה מסובבת את הסמן ב-90°. הגדרת המאפיין groundAnchor ל-0.5,0.5 גורמת לסיבוב של הסמן סביב המרכז במקום לבסיס שלו.

Swift

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

Objective-C

CLLocationDegrees degrees = 90;
londonMarker.groundAnchor = CGPointMake(0.5, 0.5);
londonMarker.rotation = degrees;
londonMarker.map = mapView;
      

טיפול באירועים בסמנים

אפשר להאזין לאירועים שמתרחשים במפה, למשל כשמשתמש מקיש על סמן. כדי להאזין לאירועים, צריך להטמיע את הפרוטוקול GMSMapViewDelegate. ראו אירועים ותנועות של סמנים כדי ללמוד איך לטפל באירועי סמנים ספציפיים. המדריך לאירועים כולל גם רשימה של שיטות ב-GMS MapViewDelegate. למידע על אירועי Street View: GMSPanoramaViewDelegate.