סמנים

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