รูปทรง

เลือกแพลตฟอร์ม แอนดรอยด์ iOS JavaScript

Maps SDK สำหรับ iOS นำเสนอหลากหลายวิธีเพื่อให้คุณเพิ่มรูปร่างลงใน แผนที่ ระบบรองรับรูปร่างต่อไปนี้

  • เส้นประกอบคือชุดของส่วนของเส้นที่เชื่อมต่อซึ่งสามารถเกิดเป็นรูปร่างใดก็ได้ ที่คุณต้องการ และสามารถใช้เพื่อทำเครื่องหมายเส้นทางบนแผนที่ได้
  • รูปหลายเหลี่ยมคือรูปร่างปิดซึ่งสามารถใช้เพื่อทำเครื่องหมายพื้นที่ต่างๆ บนแผนที่
  • วงกลมคือการฉายภาพวงกลมบนพื้นโลกได้อย่างแม่นยำ แพลตฟอร์ม

คุณสามารถแก้ไขลักษณะที่ปรากฏของแต่ละรูปร่างได้หลายวิธี

เส้นประกอบ

เส้นประกอบช่วยให้คุณวาดเส้นบนแผนที่ได้ GMSPolyline แสดงลำดับตำแหน่งที่แสดงเป็นชุด ส่วนของเส้นตรง คุณสามารถตั้งค่าสีของเส้นประกอบได้ด้วย GMSStrokeStyle

ในการสร้างเส้นประกอบ คุณจะต้องระบุเส้นทางโดยสร้าง GMSMutablePath ที่สอดคล้องกันซึ่งมีจุดตั้งแต่ 2 จุดขึ้นไป 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 พร็อพเพอร์ตี้ nil หรือ คุณสามารถนำการวางซ้อนทั้งหมดออก (รวมถึง เส้นประกอบและรูปร่างอื่นๆ) บนแผนที่โดยเรียกไอคอน GMSMapView clear

Swift

mapView.clear()

Objective-C

[mapView clear];

การปรับแต่งเส้นประกอบ

ออบเจ็กต์ GMSPolyline มีพร็อพเพอร์ตี้หลายรายการให้ควบคุม ลักษณะที่ปรากฏของเส้น โดยรองรับตัวเลือกต่อไปนี้

strokeWidth
ความกว้างของทั้งเส้น เป็นจุดหน้าจอ ค่าเริ่มต้นคือ 1 ความกว้าง ไม่ปรับขนาดเมื่อซูมแผนที่
geodesic
เมื่อYES ให้แสดงผลขอบเส้นประกอบนี้เป็นเรขาคณิต กลุ่มเรขาคณิต เคลื่อนที่ไปตามเส้นทางที่สั้นที่สุดบนพื้นผิวโลก และอาจ จะปรากฏเป็นเส้นโค้งบนแผนที่โดยมีเส้นโครงแผนที่เมอร์เคเตอร์ ไม่ใช่ภูมิศาสตร์ ส่วนต่างๆ จะถูกวาดเป็นเส้นตรงบนแผนที่ ค่าเริ่มต้นคือ NO
spans
ใช้เพื่อระบุสีของเส้นประกอบอย่างน้อย 1 ส่วน spans property เป็นอาร์เรย์ของ GMSStyleSpan ออบเจ็กต์ การตั้งค่าพร็อพเพอร์ตี้ spans เป็นวิธีที่แนะนำ เปลี่ยนสีเส้นประกอบ
strokeColor
ออบเจ็กต์ UIColor ที่ระบุสีของเส้นประกอบ ค่าเริ่มต้นคือ blueColor พร็อพเพอร์ตี้ strokeColor ละเว้นหากมีการตั้งค่า spans

ข้อมูลโค้ดต่อไปนี้เพิ่มเส้นโพลีไลน์แบบหนาจากเมลเบิร์นไปยังเพิร์ท โดยมี การประมาณตำแหน่งทางภูมิศาสตร์

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]];

ก่อนที่จะมี Maps SDK เวอร์ชัน 1.7 สำหรับ 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⁄2 ถึง ส่วนที่สองและต่อไปที่ 1⁄2 จนถึงส่วนที่ 3

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 จะยอมรับอาร์เรย์ 2 รายการที่กำหนดรูปแบบที่ซ้ำกัน หนึ่ง อาร์เรย์จะกำหนดรูปแบบที่ควรทำซ้ำ และอีกชุดจะกำหนด เป็นช่วงเวลาในการทำซ้ำ เมื่อใช้ร่วมกัน คุณจะสามารถสร้างรูปแบบที่สามารถ ใช้กับเส้นประกอบใดๆ ก็ตาม ไม่ว่าจะมีความยาวหรือจำนวนกลุ่มก็ตาม พร้อมใช้งาน

ตัวอย่างเช่น ข้อมูลโค้ดด้านล่างระบุเส้นประกอบที่มีสีขาวดำ การสลับรูปแบบ ความยาวของข้อความจะถือว่าเป็นเมตรตามเส้น Rhumb (ใน เมอร์เคเตอร์ นี่จะเป็นเส้นตรง) เนื่องจากประเภทถูกระบุไว้เป็น 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);

โพลีไลน์แบบสไปรท์สแตมป์

เส้นประกอบแบบ Sprite Stamped ช่วยให้คุณสร้างเส้นประกอบโดยใช้บิตแมปซ้ำได้ รูปภาพที่คุณเลือกได้ รูปทรงต่างๆ แสดงโดยมีเส้นขีดบนพื้นหลังที่ชัดเจน แต่มีตราประทับ ไม่ถูกตัดออกรอบมุมเส้น ทำให้มีประโยชน์ในสถานการณ์ต่างๆ เช่น จุดสำหรับแสดงเส้นทางเดินเท้า

เส้นโพลีไลน์ที่ประทับตราจากภาพต่อเรียง

คุณสามารถใช้ฟีเจอร์นี้โดยใช้ GMSSpriteStyle และตั้งค่าให้ เป็นแสตมป์โดยใช้ stampStyle ของ GMSStrokeStyle

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 = 20
let image = UIImage(named: "imageFromBundleOrAsset")! // Image could be from anywhere
let stampStyle = GMSSpriteStyle(image: image)
let transparentStampStroke = GMSStrokeStyle.transparentStroke(withStamp: stampStyle)
let span = GMSStyleSpan(style: transparentStampStroke)
polyline.spans = [span]
polyline.map = mapView

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];
polyline.strokeWidth = 20;
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];

UIImage *image = [UIImage imageNamed:@"imageFromBundleOrAsset"];
GMSStrokeStyle *transparentStampStroke = [GMSStrokeStyle transparentStrokeWithStampStyle:[GMSSpriteStyle spriteStyleWithImage:image]];

GMSStyleSpan *span = [GMSStyleSpan spanWithStyle:transparentStampStroke];
polyline.spans = @[span];
polyline.map = _mapView;

โพลีไลน์ประทับพื้นผิว

เส้นประกอบที่มีตราประทับพื้นผิวจะช่วยให้คุณสร้างเส้นประกอบได้โดยใช้เส้น พื้นผิวที่คุณต้องการ รูปทรงสามารถแสดงด้วยสีที่ชัดเจน สีทึบ หรือการไล่ระดับสี เส้นโครงร่าง พื้นผิวจะปรับขนาดเมื่อระดับการซูมเปลี่ยนแปลง รูปภาพสุดท้าย ของจุดสิ้นสุดหรือจุดเริ่มต้นของเส้นทางหรือจุดของเส้นทางจะถูกตัดเมื่อซูมบางส่วน ระดับต่างๆ

เส้นประกอบพื้นผิว

คุณใช้ฟีเจอร์นี้ได้โดยใช้GMSTextureStyle และการตั้งค่า เป็นแสตมป์โดยใช้ stampStyle ของ GMSStrokeStyle

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 = 20
let redWithStamp = GMSStrokeStyle.solidColor(.red)
let image = UIImage(named: "imageFromBundleOrAsset")! // Image could be from anywhere
redWithStamp.stampStyle = GMSTextureStyle(image: image)
let span = GMSStyleSpan(style: redWithStamp)
polyline.spans = [span]
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 = 20;
GMSStrokeStyle *redWithStamp = [GMSStrokeStyle solidColor:[UIColor redColor]];

UIImage *image = [UIImage imageNamed:@"imageFromBundleOrAsset"]; // Image could be from anywhere
redWithStamp.stampStyle = [GMSTextureStyle textureStyleWithImage:image];

GMSStyleSpan *span = [GMSStyleSpan spanWithStyle:redWithStamp];
polyline.spans = @[span];
polyline.map = _mapView;

ความสามารถของแผนที่

พร็อพเพอร์ตี้ mapCapabilities บน GMSMapView เพิ่มแบบเป็นโปรแกรม กำลังตรวจหาสถานที่เฉพาะในแผนที่ วิธีนี้มีประโยชน์เมื่อต้องการทราบ แผนที่บางส่วน capabilities สามารถใช้ได้ก่อนเรียกใช้ API ที่ระบุ ช่วงเวลานี้ จะกำหนดว่ามุมมองแผนที่รองรับโพลีไลน์สไปรท์ที่ประทับตราหรือไม่

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 = 20
let image = UIImage(named: "imageFromBundleOrAsset")! // Image could be from anywhere
let spans: [GMSStyleSpan]
if (mapView.mapCapabilities.contains(.spritePolylines)) {
  let spriteStyle = GMSSpriteStyle(image: image)
  let stroke = GMSStrokeStyle.transparentStroke(withStamp: spriteStyle)
  spans = [ GMSStyleSpan(style: stroke) ]
} else {
  let stroke = GMSStrokeStyle.solidColor(.clear)
  stroke.stampStyle = GMSTextureStyle(image: image)
  spans = [ GMSStyleSpan(style: stroke) ]
}
polyline.spans = spans
polyline.map = mapView

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];

UIImage *_Nonnull image = [UIImage imageNamed:@"imageFromBundleOrAsset"]; // Image could be from anywhere

NSArray<GMSStyleSpan *> * spans;
if (_mapView.mapCapabilities & GMSMapCapabilityFlagsSpritePolylines) {
  GMSSpriteStyle *spriteStyle = [GMSSpriteStyle spriteStyleWithImage:image];
  GMSStrokeStyle *stroke = [GMSStrokeStyle transparentStrokeWithStampStyle:spriteStyle];
  spans = @[ [GMSStyleSpan spanWithStyle:stroke] ];
} else {
  GMSStrokeStyle *stroke = [GMSStrokeStyle solidColor:UIColor.clearColor];
  stroke.stampStyle = [GMSTextureStyle textureStyleWithImage:image];
  spans = @[ [GMSStyleSpan spanWithStyle:stroke] ];
}

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeWidth = 20;
polyline.spans = spans;
polyline.map = _mapView;

รูปแบบนี้ช่วยให้คุณสมัครรับข้อมูลการเปลี่ยนแปลงและตอบสนองต่อการอัปเดตด้วยแผนที่ได้ ดูสถานะ นอกจากนี้คุณยังติดตั้งใช้งาน didChangeMapCapabilities ใน GMSMapViewDelegate เพื่อรับข้อมูลอัปเดตเกี่ยวกับฟีเจอร์

รูปหลายเหลี่ยม

รูปหลายเหลี่ยมคล้ายกับรูปหลายเหลี่ยมเนื่องจากประกอบด้วยชุดของ พิกัดตามลำดับ แต่แทนที่จะตอบแบบสอบถาม รูปหลายเหลี่ยมได้รับการออกแบบมาเพื่อกำหนดพื้นที่ของแข็งภายในวงปิด รูปหลายเหลี่ยมคือ GMSPolygon ที่กำหนดไว้ใน Maps SDK สำหรับ iOS

คุณสามารถเพิ่ม 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.map เป็น nil และปลดออก layer จากระดับบน

Swift

 polygon.map = nil
 polygon.layer.removeFromSuperLayer()

Objective-C

 polygon.map = nil;
 [polygon.layer removeFromSuperlayer];

วงกลม

นอกจากคลาส GMSPolygon ทั่วไปแล้ว ฟังก์ชัน Maps SDK สำหรับ iOS ยังมี GMSCircle ที่ช่วยให้คุณ เพื่อวาดวงกลมบนพื้นผิวโลก

ในการสร้างวงกลม คุณต้องระบุคุณสมบัติ 2 อย่างต่อไปนี้

  • position ในฐานะ CLLocationCoordinate2D
  • radius เมตร

วงกลมจึงได้รับการกำหนดให้เป็นชุดของจุดทั้งหมดบนพื้นผิวโลก ซึ่งอยู่ห่างจาก center ที่ระบุ radius เมตร เพราะวิธีการ เส้นโครงเมอร์เคเตอร์ที่ Maps API ใช้แสดงผลทรงกลมบนพื้นผิวราบเรียบ วงกลมนี้จะปรากฏเป็นวงกลมที่เกือบสมบูรณ์บนแผนที่เมื่ออยู่ใกล้กับ เส้นศูนย์สูตรและปรากฏเป็นวงกลมไม่วงกลม (บนหน้าจอ) เพิ่มมากขึ้นเป็นวงกลม เคลื่อนที่ออกจากเส้นศูนย์สูตร

การเพิ่มแวดวง

ข้อมูลโค้ดต่อไปนี้จะเพิ่มวงกลมลงในแผนที่

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 ของรูปหลายเหลี่ยมเป็นอาร์เรย์ของ 1 หรือ 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;