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];
การเพิ่มเส้นประกอบ
- สร้างออบเจ็กต์
GMSMutablePath
- กำหนดจุดในเส้นทางด้วย
addCoordinate:
หรือaddLatitude:longitude:
วิธี - สร้างอินสแตนซ์ออบเจ็กต์
GMSPolyline
ใหม่โดยใช้เส้นทางเป็น อาร์กิวเมนต์ - ตั้งค่าพร็อพเพอร์ตี้อื่นๆ เช่น
strokeWidth
และstrokeColor
ตามความจำเป็น - ตั้งค่าพร็อพเพอร์ตี้
map
ของGMSPolyline
- เส้นประกอบจะปรากฏในแผนที่
ข้อมูลโค้ดต่อไปนี้จะเพิ่มรูปสี่เหลี่ยมผืนผ้าลงในแผนที่
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
ให้แสดงผลขอบเส้นประกอบนี้เป็นเรขาคณิต ส่วนที่เป็นเส้นบอกค่าพิกัดภูมิศาสตร์จะไปตามเส้นทางที่สั้นที่สุดบนพื้นผิวโลก และอาจปรากฏเป็นเส้นโค้งบนแผนที่ที่ใช้การฉาย Mercator ส่วนที่เป็นเส้นที่ไม่ตรงตามเส้นลองจิจูดและเส้นละติจูดจะวาดเป็นเส้นตรงบนแผนที่ ค่าเริ่มต้นคือNO
spans
- ใช้เพื่อระบุสีของเส้นประกอบอย่างน้อย 1 ส่วน พร็อพเพอร์ตี้ span คืออาร์เรย์ของออบเจ็กต์
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]];
ก่อนเวอร์ชัน 1.7 ของ Maps SDK สำหรับ 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 (ใน
Mercator ซึ่งเป็นเส้นตรง) เนื่องจากมีการระบุประเภทเป็น
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
หมายถึงจุดบนพื้นผิวโลก เส้นแบ่งระหว่าง
ตามลำดับการเพิ่มลงในเส้นทาง
เพิ่มรูปหลายเหลี่ยม
- สร้างออบเจ็กต์
GMSMutablePath
- กำหนดจุดในเส้นทางด้วย
addCoordinate:
หรือaddLatitude:longitude:
วิธี คะแนนเหล่านี้เป็นเค้าโครงของ รูปหลายเหลี่ยม - สร้างอินสแตนซ์ออบเจ็กต์
GMSPolygon
ใหม่โดยใช้เส้นทางเป็น อาร์กิวเมนต์ - ตั้งค่าพร็อพเพอร์ตี้อื่นๆ เช่น
strokeWidth
,strokeColor
และfillColor
ตามต้องการ - กำหนดรูปหลายเหลี่ยมให้กับออบเจ็กต์
GMSMapView
โดยตั้งค่า พร็อพเพอร์ตี้GMSPolygon.map
- รูปหลายเหลี่ยมจะปรากฏบนแผนที่
ข้อมูลโค้ดต่อไปนี้จะเพิ่มสี่เหลี่ยมผืนผ้าลงในแผนที่
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;