צורות

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
בחירת פלטפורמה: Android iOS JavaScript

ה-SDK של מפות ל-iOS מציע כמה דרכים פשוטות להוסיף צורות למפות. יש תמיכה בצורות הבאות:

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

ניתן לשנות את המראה של כל צורה במספר דרכים.

רב-קו

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

כדי ליצור קו רב-תכליתי, צריך לציין את הנתיב שלו באמצעות יצירה של אובייקט GMSMutablePath תואם עם שתי נקודות או יותר. כל CLLocationCoordinate2D מייצג נקודה על פני השטח של כדור הארץ. קטעי הקו משוייכים בין נקודות לפי הסדר שבו מוסיפים אותם לנתיב. ניתן להוסיף נקודות לנתיב בשיטות addCoordinate: או addLatitude:longitude:.

Swift

let path = GMSMutablePath()
path.add(CLLocationCoordinate2D(latitude: -33.85, longitude: 151.20))
path.add(CLLocationCoordinate2D(latitude: -33.70, longitude: 151.40))
path.add(CLLocationCoordinate2D(latitude: -33.73, longitude: 151.41))
let polyline = GMSPolyline(path: path)
      

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addCoordinate:CLLocationCoordinate2DMake(-33.85, 151.20)];
[path addCoordinate:CLLocationCoordinate2DMake(-33.70, 151.40)];
[path addCoordinate:CLLocationCoordinate2DMake(-33.73, 151.41)];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
      

הוספה של רב-קו

  1. יצירת אובייקט GMSMutablePath.
  2. מגדירים את הנקודות בנתיב עם השיטות addCoordinate: או addLatitude:longitude:.
  3. יצירת אובייקט GMSPolyline חדש באמצעות הנתיב כארגומנט.
  4. יש להגדיר נכסים אחרים, כמו strokeWidth, וגם strokeColor, לפי הצורך.
  5. הגדרה של מאפיין map עבור GMSPolyline.
  6. הפוליגון מופיע במפה.

קטע הקוד הבא מוסיף מלבן למפה:

Swift

let rectanglePath = GMSMutablePath()
rectanglePath.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))
rectanglePath.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.0))
rectanglePath.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.2))
rectanglePath.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.2))
rectanglePath.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))

let rectangle = GMSPolyline(path: path)
rectangle.map = mapView
      

Objective-C

GMSMutablePath *rectanglePath = [GMSMutablePath path];
[rectanglePath addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];
[rectanglePath addCoordinate:CLLocationCoordinate2DMake(37.45, -122.0)];
[rectanglePath addCoordinate:CLLocationCoordinate2DMake(37.45, -122.2)];
[rectanglePath addCoordinate:CLLocationCoordinate2DMake(37.36, -122.2)];
[rectanglePath addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];

GMSPolyline *rectangle = [GMSPolyline polylineWithPath:path];
rectangle.map = mapView;
      

מצולע מלבני

הסרת רב-קו אחד

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

Swift

mapView.clear()
      

Objective-C

[mapView clear];
      

התאמה אישית של רב-קו

האובייקט GMSPolyline מספק כמה מאפיינים לשליטה במראה של הקו. הוא תומך באפשרויות הבאות:

strokeWidth
הרוחב של כל הקו, בנקודות המסך. ברירת המחדל היא 1. הרוחב לא משתנה כשמקטינים את המפה.
geodesic
בעת עיבוד YES, יש לעבד את קצה המצולע הזה כגאודזי. פלחים גיאודזיים עוברים לאורך המסלול הקצר ביותר על פני השטח של כדור הארץ, ועשויים להופיע כקווים מעוקלים במפה עם תחזית של מרקטור. קווים לא גיאוגרפיים משורטטים כקווים ישרים במפה. ברירת המחדל היא NO.
spans
משמש לציון הצבע של פלח אחד או יותר בפוליגון. המאפיין span הוא מערך של GMSStyleSpan אובייקטים. הגדרת המאפיין spans היא הדרך המועדפת לשינוי הצבע של רב-קו.
strokeColor
אובייקט UIColor המציין את הצבע של הפוליגון. ברירת המחדל היא blueColor. אם המדיניות spans מוגדרת, המערכת מתעלמת מהנכס strokeColor.

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

Swift

let path = GMSMutablePath()
path.addLatitude(-37.81319, longitude: 144.96298)
path.addLatitude(-31.95285, longitude: 115.85734)
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 10.0
polyline.geodesic = true
polyline.map = mapView
      

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeWidth = 10.f;
polyline.geodesic = YES;
polyline.map = mapView;
      

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

Swift

polyline.strokeColor = .blue
      

Objective-C

polyline.strokeColor = [UIColor blueColor];
      

שינוי הצבע של רב-קו

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

קטע הקוד שמוצג בהמשך משתמש בשיטה spanWithColor: כדי לשנות את הצבע של הקו כולו בצבע אדום.

Swift

polyline.spans = [GMSStyleSpan(color: .red)]
      

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithColor:[UIColor redColor]]];
      

לחלופין, אם כבר יש לך גישה לאובייקט GMSStrokeStyle, אפשר להשתמש בשיטה spanWithStyle:.

Swift

let solidRed = GMSStrokeStyle.solidColor(.red)
polyline.spans = [GMSStyleSpan(style: solidRed)]
      

Objective-C

GMSStrokeStyle *solidRed = [GMSStrokeStyle solidColor:[UIColor redColor]];
polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed]];
      

לפני גרסה 1.7 של ה-SDK של מפות Google ל-iOS, הנכס היחיד strokeColor היה זמין להגדרת הצבע המלא של GMSPolyline. לנכס spans יש עדיפות על פני נכס strokeColor.

Swift

polyline.strokeColor = .red
      

Objective-C

polyline.strokeColor = [UIColor redColor];
      

סגנונות

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

Swift

// Create two styles: one that is solid blue, and one that is a gradient from red to yellow
let solidBlue = GMSStrokeStyle.solidColor(.blue)
let solidBlueSpan = GMSStyleSpan(style: solidBlue)
let redYellow = GMSStrokeStyle.gradient(from: .red, to: .yellow)
let redYellowSpan = GMSStyleSpan(style: redYellow)
      

Objective-C

// Create two styles: one that is solid blue, and one that is a gradient from red to yellow
GMSStrokeStyle *solidBlue = [GMSStrokeStyle solidColor:[UIColor blueColor]];
GMSStyleSpan *solidBlueSpan = [GMSStyleSpan spanWithStyle:solidBlue];
GMSStrokeStyle *redYellow =
    [GMSStrokeStyle gradientFromColor:[UIColor redColor] toColor:[UIColor yellowColor]];
GMSStyleSpan *redYellowSpan = [GMSStyleSpan spanWithStyle:redYellow];
      

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

Swift

polyline.spans = [GMSStyleSpan(style: redYellow)]
      

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithStyle:redYellow]];
      

שינוי הצבע של קטעים בודדים בשורה

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

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

Swift

polyline.spans = [
  GMSStyleSpan(style: solidRed),
  GMSStyleSpan(style: solidRed),
  GMSStyleSpan(style: redYellow)
]
      

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed],
                   [GMSStyleSpan spanWithStyle:solidRed],
                   [GMSStyleSpan spanWithStyle:redYellow]];
      

ניתן להשתמש בשיטה spanWithStyle:segments: כדי להגדיר את הסגנון במספר פלחים בו-זמנית. לדוגמה, הקוד הבא הוא זהה לקוד שלמעלה. המערכת תתעלם תמיד מאורך הקטע הסופי ב-GMSStyleSpan, מפני שהסגנון ישמש לתיאור שאר השורה.

Swift

polyline.spans = [
  GMSStyleSpan(style: solidRed, segments:2),
  GMSStyleSpan(style: redYellow, segments:10)
]
      

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed segments:2],
                   [GMSStyleSpan spanWithStyle:redYellow segments:10]];
      

פלחים חלקיים

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

Swift

polyline.spans = [
  GMSStyleSpan(style: solidRed, segments: 2.5),
  GMSStyleSpan(color: .gray),
  GMSStyleSpan(color: .purple, segments: 0.75),
  GMSStyleSpan(style: redYellow)
]
      

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed segments:2.5],
                   [GMSStyleSpan spanWithColor:[UIColor grayColor]],
                   [GMSStyleSpan spanWithColor:[UIColor purpleColor] segments:0.75],
                   [GMSStyleSpan spanWithStyle:redYellow]];
      

הוספה של דוגמת צבע שחוזרת על עצמה לפוליגון

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

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

Swift

let styles = [
  GMSStrokeStyle.solidColor(.white),
  GMSStrokeStyle.solidColor(.black)
]
let lengths: [NSNumber] = [100000, 50000]
polyline.spans = GMSStyleSpans(
  polyline.path!,
  styles,
  lengths,
  GMSLengthKind.rhumb
)
      

Objective-C

NSArray *styles = @[[GMSStrokeStyle solidColor:[UIColor whiteColor]],
                    [GMSStrokeStyle solidColor:[UIColor blackColor]]];
NSArray *lengths = @[@100000, @50000];
polyline.spans = GMSStyleSpans(polyline.path, styles, lengths, kGMSLengthRhumb);
      

פוליגונים

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

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

הוספת מצולע

  1. יצירת אובייקט GMSMutablePath.
  2. מגדירים את הנקודות בנתיב עם השיטות addCoordinate: או addLatitude:longitude:. הנקודה הזו יוצרת את קווי המתאר של הפוליגון.
  3. יצירת אובייקט GMSPolygon חדש באמצעות הנתיב כארגומנט.
  4. ניתן להגדיר מאפיינים אחרים, כגון strokeWidth, strokeColor וfillColor, לפי הצורך.
  5. כדי להקצות את הפוליגון לאובייקט GMSMapView, יש להגדיר את המאפיין GMSPolygon.map.
  6. הפוליגון מופיע במפה.

קטע הקוד הבא מוסיף מלבן למפה.

Swift

// Create a rectangular path
let rect = GMSMutablePath()
rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.2))
rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.2))

// Create the polygon, and assign it to the map.
let polygon = GMSPolygon(path: rect)
polygon.fillColor = UIColor(red: 0.25, green: 0, blue: 0, alpha: 0.05);
polygon.strokeColor = .black
polygon.strokeWidth = 2
polygon.map = mapView
      

Objective-C

// Create a rectangular path
GMSMutablePath *rect = [GMSMutablePath path];
[rect addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.45, -122.0)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.45, -122.2)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.36, -122.2)];

// Create the polygon, and assign it to the map.
GMSPolygon *polygon = [GMSPolygon polygonWithPath:rect];
polygon.fillColor = [UIColor colorWithRed:0.25 green:0 blue:0 alpha:0.05];
polygon.strokeColor = [UIColor blackColor];
polygon.strokeWidth = 2;
polygon.map = mapView;
      

אתם יכולים להתאים אישית את המראה של הפוליגון לפני שמוסיפים אותו למפה, וגם אחרי שמוסיפים אותו למפה.

מעגלים

בנוסף לכיתה הכללית GMSPolygon, ה-SDK של מפות Google ל-iOS כולל גם את GMSCircle, שמאפשר לכם לשרטט מעגלים בקלות על פני השטח של כדור הארץ.

כדי ליצור מעגל, עליכם לציין את שני המאפיינים הבאים:

  • position בתור CLLocationCoordinate2D.
  • radius במטרים.

לאחר מכן, עיגול מוגדר כקבוצת כל הנקודות על פני השטח של כדור הארץ במרחק של radius מטרים מהcenter. בשל האופן שבו התחזית של מרקטור המשמש את ממשק ה-API של מפות Google מעבדת כדור על פני משטח שטוח, הוא יופיע על המפה כעיגול כמעט מושלם, כשהוא נמצא ליד המשווה. הוא ייראה פחות מעוגל (על המסך) כשהעיגול יתרחש מקו המשווה.

הוספת מעגל

קטע הקוד הבא מוסיף עיגול למפה:

Swift

let circleCenter = CLLocationCoordinate2D(latitude: 37.35, longitude: -122.0)
let circle = GMSCircle(position: circleCenter, radius: 1000)
circle.map = mapView
      

Objective-C

CLLocationCoordinate2D circleCenter = CLLocationCoordinate2DMake(37.35, -122.0);
GMSCircle *circle = [GMSCircle circleWithPosition:circleCenter
                                         radius:1000];
circle.map = mapView;
      

תוכלו להתאים אישית את המראה של העיגול גם לפני ההוספה שלו למפה וגם לאחר הוספתה למפה.

התאמה אישית של מעגל

אפשר לציין צבעים מותאמים אישית ורוחב קווים על ידי שינוי המאפיינים GMSCircle. הוא תומך באפשרויות הבאות:

fillColor
אובייקט UIColor המציין את הצבע הפנימי של העיגול. ברירת המחדל היא שקיפות.
strokeColor
אובייקט UIColor המציין את צבע העיגול במתאר. ברירת המחדל היא blackColor.
strokeWidth
עובי הקו המעגלי, בנקודות המסך. ברירת המחדל היא 1. לא ניתן לשנות את מידת העובי של המפה כאשר משנים את מרחק התצוגה.

קטע הקוד הבא מוסיף עיגול אדום עבה עם עיצוב אדום שקוף למחצה.

Swift

circle.fillColor = UIColor(red: 0.35, green: 0, blue: 0, alpha: 0.05)
circle.strokeColor = .red
circle.strokeWidth = 5
      

Objective-C

circle.fillColor = [UIColor colorWithRed:0.25 green:0 blue:0 alpha:0.05];
circle.strokeColor = [UIColor redColor];
circle.strokeWidth = 5;
      

יצירת פוליגון חלול

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

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

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

דוגמת הקוד הבאה יוצרת פוליגון עם שני חורים:

Swift

let hydeParkLocation = CLLocationCoordinate2D(latitude: -33.87344, longitude: 151.21135)
let camera = GMSCameraPosition.camera(withTarget: hydeParkLocation, zoom: 16)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
mapView.animate(to: camera)

let hydePark = "tpwmEkd|y[QVe@Pk@BsHe@mGc@iNaAKMaBIYIq@qAMo@Eo@@[Fe@DoALu@HUb@c@XUZS^ELGxOhAd@@ZB`@J^BhFRlBN\\BZ@`AFrATAJAR?rAE\\C~BIpD"
let archibaldFountain = "tlvmEqq|y[NNCXSJQOB[TI"
let reflectionPool = "bewmEwk|y[Dm@zAPEj@{AO"

let hollowPolygon = GMSPolygon()
hollowPolygon.path = GMSPath(fromEncodedPath: hydePark)
hollowPolygon.holes = [GMSPath(fromEncodedPath: archibaldFountain)!, GMSPath(fromEncodedPath: reflectionPool)!]
hollowPolygon.fillColor = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 0.2)
hollowPolygon.strokeColor = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
hollowPolygon.strokeWidth = 2
hollowPolygon.map = mapView
      

Objective-C

CLLocationCoordinate2D hydeParkLocation = CLLocationCoordinate2DMake(-33.87344, 151.21135);
GMSCameraPosition *camera = [GMSCameraPosition cameraWithTarget:hydeParkLocation
                                                           zoom:16];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];

NSString *hydePark = @"tpwmEkd|y[QVe@Pk@BsHe@mGc@iNaAKMaBIYIq@qAMo@Eo@@[Fe@DoALu@HUb@c@XUZS^ELGxOhAd@@ZB`@J^BhFRlBN\\BZ@`AFrATAJAR?rAE\\C~BIpD";
NSString *archibaldFountain = @"tlvmEqq|y[NNCXSJQOB[TI";
NSString *reflectionPool = @"bewmEwk|y[Dm@zAPEj@{AO";

GMSPolygon *hollowPolygon = [[GMSPolygon alloc] init];
hollowPolygon.path = [GMSPath pathFromEncodedPath:hydePark];
hollowPolygon.holes = @[[GMSPath pathFromEncodedPath:archibaldFountain],
                  [GMSPath pathFromEncodedPath:reflectionPool]];
hollowPolygon.fillColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.2];
hollowPolygon.strokeColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];
hollowPolygon.strokeWidth = 2;
hollowPolygon.map = mapView;