סמנים

בחירת פלטפורמה: 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:

• הערך 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;
      

אפשר להנפיש את שקיפות הסמן באמצעות [אנימציה ליבה]אנימציה ליבה באמצעות 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.