סמנים

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

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

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

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

הוספת סמן

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

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

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. לחלופין, אפשר להסיר את כל שכבות-העל (כולל הסמנים) שמוצגות כרגע במפה על ידי קריאה ל-method‏ 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:

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

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

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

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

אפשר לשלוט בשקיפות של סמן באמצעות הנכס opacity שלו. צריך לציין את השקיפות כערך של משתנה מסוג float בין 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. במאמר אירועים ומחוות של סמנים מוסבר איך לטפל באירועים ספציפיים של סמנים. במדריך לאירועים מופיעה גם רשימה של שיטות ב-GMSMapViewDelegate. מידע על אירועים ב-Street View זמין במאמר GMSPanoramaViewDelegate.