รูปทรง

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

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

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

เส้นประกอบ

เส้นที่วาดด้วยเส้นช่วยให้คุณวาดเส้นบนแผนที่ได้ ออบเจ็กต์ GMSPolyline แสดงถึงลําดับสถานที่ตามลําดับที่แสดงเป็นชุดกลุ่ม กําหนดสีโพลีไลน์ได้ด้วย GMSStrokeStyle

หากต้องการสร้างโพลีไลน์ คุณจะต้องระบุเส้นทางโดยสร้างออบเจ็กต์ GMSMutablePath ที่สอดคล้องกันที่มีจุด 2 จุดขึ้นไป แต่ละ CLLocationCoordinate2D แสดงถึงจุดบนพื้นผิวโลก กลุ่มเส้นจะถูกวาดระหว่างจุดต่างๆ ตามลําดับที่คุณเพิ่มเข้าไปในเส้นทาง คุณเพิ่มจุดลงในเส้นทางได้ด้วยเมธอด addCoordinate: หรือ addLatitude:longitude:

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)
      

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. เส้นประกอบจะปรากฏบนแผนที่

ข้อมูลโค้ดต่อไปนี้จะเพิ่มสี่เหลี่ยมผืนผ้าเข้าไปในแผนที่

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
      

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

mapView.clear()
      

[mapView clear];
      

การปรับแต่งโพลีไลน์

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

strokeWidth

ความกว้างของเส้นทั้งเส้นในจุดบนหน้าจอ ค่าเริ่มต้นคือ 1 ความกว้างจะไม่ปรับขนาดเมื่อซูมแผนที่

geodesic

เมื่อ YES ให้แสดงผลขอบโพลีไลน์นี้เป็นรูปเรขาคณิต กลุ่มลูกโลกจะไปตามเส้นทางที่สั้นที่สุดตามพื้นผิวโลกและอาจแสดงเป็นเส้นโค้งบนแผนที่ที่มีการฉายภาพ Mercator ระบบจะวาดเส้นตรงที่ไม่ใช่ภูมิศาสตร์เป็นเส้นตรงบนแผนที่ ค่าเริ่มต้นคือ NO

spans

ที่ใช้เพื่อระบุสีของกลุ่มโพลีไลน์อย่างน้อย 1 กลุ่ม พร็อพเพอร์ตี้ Span คืออาร์เรย์ของออบเจ็กต์ GMSStyleSpan การตั้งค่าพร็อพเพอร์ตี้ spans เป็นวิธีที่แนะนําในการเปลี่ยนสีของโพลีไลน์

strokeColor

วัตถุ UIColor ที่ระบุสีของโพลีไลน์ ค่าเริ่มต้นคือ blueColor ระบบจะละเว้นพร็อพเพอร์ตี้ strokeColor หากกําหนด spans ไว้

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

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
      

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 ค้างไว้

polyline.strokeColor = .blue
      

polyline.strokeColor = [UIColor blueColor];
      

การเปลี่ยนสีของโพลีไลน์

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

ข้อมูลโค้ดด้านล่างใช้วิธีการ spanWithColor: เพื่อเปลี่ยนสีของทั้งบรรทัดเป็นสีแดง

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

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

หรือหากมีสิทธิ์เข้าถึงออบเจ็กต์ GMSStrokeStyle อยู่แล้ว คุณใช้เมธอด spanWithStyle: ได้

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

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

ก่อนเวอร์ชัน 1.7 ของ Maps SDK สําหรับ iOS คุณสมบัติเดี่ยว strokeColor พร้อมสําหรับการตั้งค่าสีของ GMSPolyline ทั้งหมด พร็อพเพอร์ตี้ spans มีลําดับความสําคัญสูงกว่า strokeColor

polyline.strokeColor = .red
      

polyline.strokeColor = [UIColor redColor];
      

รูปแบบ

หากแอปใช้สีเส้นโครงร่างเดียวกันหลายๆ ครั้ง ก็อาจ มีประโยชน์ในการกําหนดสไตล์ที่นํามาใช้ใหม่ได้ ระบุรูปแบบโพลีไลน์โดยใช้ออบเจ็กต์ GMSStrokeStyle ลักษณะเส้นโครงร่างอาจเป็นสีทึบหรือการไล่ระดับสีจากสีหนึ่งเป็นสีอื่น เมื่อสร้างสไตล์แล้ว คุณจะนําสไตล์นั้นไปใช้กับ GMSStyleSpan ได้ด้วยเมธอด spanWithStyle:

// 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)
      

// 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 เดี่ยว ตัวอย่างด้านล่างจะแสดงวิธีใช้การไล่ระดับสีกับทุกความยาวของเส้น

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

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

การเปลี่ยนสีของแต่ละบรรทัด

หากต้องการจัดรูปแบบโพลีไลน์แต่ละส่วนแยกกัน คุณสามารถทําได้โดยสร้างอาร์เรย์ของออบเจ็กต์ GMSStyleSpan และส่งต่อไปยังพร็อพเพอร์ตี้ spans โดยค่าเริ่มต้น แต่ละรายการในอาร์เรย์จะตั้งค่าสีของเส้นตรงที่เกี่ยวข้อง หากมีองค์ประกอบในอาร์เรย์มากกว่ากลุ่ม ในเส้น ระบบจะละเว้นองค์ประกอบพิเศษ หากมีองค์ประกอบในอาร์เรย์จํานวนน้อยลง GMSStyleSpan สุดท้ายจะอธิบายสีสําหรับส่วนที่เหลือของบรรทัด

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

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

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

คุณใช้วิธี spanWithStyle:segments: เพื่อกําหนดรูปแบบให้กับหลายๆ กลุ่มพร้อมกันได้ ตัวอย่างเช่น โค้ดต่อไปนี้เทียบเท่ากับโค้ดด้านบน ระบบจะไม่สนใจความยาวของส่วนสุดท้ายของ GMSStyleSpan เสมอ เนื่องจากจะใช้สไตล์ในการอธิบายส่วนที่เหลือของบรรทัด

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

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

ส่วนย่อย

สามารถระบุกลุ่มเป็นค่าเศษส่วน วิธีนี้จะนําสไตล์ไปใช้กับจํานวนส่วนย่อยๆ ที่อาจทําให้เกิดการแบ่งส่วน GMSStyleSpan แต่ละรายการจะเริ่มต้นหลังจากส่วนก่อนหน้าทันที ในตัวอย่างด้านล่าง สีเทาจะเริ่มจาก 1⁄2 ถึงกลุ่มที่ 2 และต่อไปยัง 1⁄2 ถึงกลุ่มที่ 3

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

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

ตัวอย่างเช่น ข้อมูลโค้ดด้านล่างกําหนดเส้นประกอบที่มีรูปแบบสลับขาวดํา ระบบวัดความยาวของมันเป็นหน่วยเมตรตามเส้นรอบรูป (ใน Mercator นี่คือเส้นตรง) ตามประเภทที่ระบุไว้ในหัวข้อ kGMSLengthRhumb

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

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

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

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

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

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 ที่เฉพาะเจาะจงหรือไม่ ข้อความค้นหานี้จะระบุว่ามุมมองแผนที่สนับสนุน Polylines แบบสไปรท์หรือไม่

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

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 เพื่อรับข้อมูลอัปเดตเกี่ยวกับความพร้อมใช้งานของฟีเจอร์ได้อีกด้วย

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

รูปหลายเหลี่ยมนั้นมีลักษณะคล้ายเส้นประกอบที่อยู่ในหลายพิกัดในลําดับที่เรียงกัน อย่างไรก็ตาม รูปหลายเหลี่ยมจะหมายถึงการกําหนดพื้นที่ทึบภายในลูปแบบปิดเท่านั้น กําหนดรูปหลายเหลี่ยม ใน Maps SDK สําหรับ iOS โดยคลาส GMSPolygon

คุณสามารถเพิ่ม GMSPolygon ลงในแผนที่ด้วยวิธีเดียวกับที่คุณเพิ่ม GMSPolyline ขั้นแรกให้ระบุเส้นทางด้วยการสร้างออบเจ็กต์ GMSMutablePath ที่เกี่ยวข้องและเพิ่มจุดในออบเจ็กต์ จุดเหล่านี้จะรวมกันเป็นโครงร่างของรูปหลายเหลี่ยม CLLocationCoordinate2D แต่ละเส้นแสดงถึงจุดบนพื้นผิวโลก กลุ่มเส้นจะถูกวาดระหว่างจุดต่างๆ ตามลําดับที่คุณเพิ่มเข้าไปในเส้นทาง

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

1. สร้างออบเจ็กต์ GMSMutablePath
2. กําหนดจุดในเส้นทางด้วยเมธอด addCoordinate: หรือ addLatitude:longitude: จุดเหล่านี้จะรวมกันเป็นโครงร่างของรูปหลายเหลี่ยม
3. สร้างอินสแตนซ์ออบเจ็กต์ GMSPolygon ใหม่โดยใช้เส้นทางเป็นอาร์กิวเมนต์
4. กําหนดพร็อพเพอร์ตี้อื่นๆ เช่น strokeWidth, strokeColor และ fillColor ตามต้องการ
5. กําหนดรูปหลายเหลี่ยมให้กับวัตถุ GMSMapView โดยการตั้งค่าพร็อพเพอร์ตี้ GMSPolygon.map
6. รูปหลายเหลี่ยมจะปรากฏขึ้นบนแผนที่

ข้อมูลโค้ดต่อไปนี้จะเพิ่มสี่เหลี่ยมผืนผ้าเข้าไปในแผนที่

// 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
      

// 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 ออกจากระดับบนสุด

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

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

วงกลม

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

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

• position เป็น CLLocationCoordinate2D
• radius เมตร

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

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

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

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

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 ความหนาจะไม่ปรับขนาดเมื่อซูมแผนที่

ข้อมูลโค้ดต่อไปนี้เพิ่มวงกลมสีแดงหนาพร้อมด้านในสีแดงกึ่งโปร่งใส

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

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

การสร้างรูปหลายเหลี่ยมแบบโปร่ง

คุณรวมเส้นทางหลายเส้นทางไว้ในออบเจ็กต์ GMSPolygon เดียวได้เพื่อสร้างรูปร่างที่ซับซ้อน เช่น วงแหวนหรือโดนัท (ที่พื้นที่รูปหลายเหลี่ยมจะปรากฏอยู่ในรูปหลายเหลี่ยมให้เป็นรูปร่างแยกต่างหาก) รูปร่างที่ซับซ้อนคือเส้นทางหลายเส้นทาง

สร้างรูปหลายเหลี่ยมด้วยเส้นทางที่ระบุพื้นที่ขนาดใหญ่ที่สุดที่ครอบคลุมรูปหลายเหลี่ยม จากนั้นระบุพร็อพเพอร์ตี้ holes ของรูปหลายเหลี่ยมเป็นอาร์เรย์ของออบเจ็กต์ GMSPath อย่างน้อย 1 รายการ ซึ่งกําหนดรูภายในรูปหลายเหลี่ยมดังกล่าว

หากเส้นทางที่เล็กกว่าล้อมรอบด้วยเส้นทางขนาดใหญ่ขึ้น ดูเหมือนจะมีการลบรูปหลายเหลี่ยมออกแล้ว

ตัวอย่างโค้ดต่อไปนี้สร้างรูปหลายเหลี่ยมที่มีรู 2 จุด

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
      

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;