Hình dạng

SDK bản đồ dành cho iOS cung cấp nhiều cách để bạn thêm hình dạng vào Maps. Các hình dạng sau được hỗ trợ:

• Hình nhiều đường là một chuỗi các đoạn thẳng được kết nối có thể tạo thành hình dạng bất kỳ bạn muốn và có thể dùng để đánh dấu các đường và tuyến đường trên bản đồ.
• Đa giác là một hình dạng khép kín có thể được dùng để đánh dấu các khu vực trên bản đồ.
• Vòng tròn là phép chiếu chính xác về mặt địa lý của một vòng tròn trên Trái Đất nền tảng.

Bạn có thể sửa đổi giao diện của mỗi hình dạng theo một số cách.

Hình nhiều đường

Bạn có thể vẽ các đường trên bản đồ bằng hình nhiều đường. GMSPolyline đại diện cho một chuỗi vị trí theo thứ tự, được hiển thị dưới dạng một chuỗi phân đoạn đường kẻ. Bạn có thể đặt màu của hình nhiều đường bằng GMSStrokeStyle.

Để tạo hình nhiều đường, bạn sẽ cần chỉ định đường dẫn của hình nhiều đường bằng cách tạo một đối tượng GMSMutablePath tương ứng với hai điểm trở lên. Mỗi CLLocationCoordinate2D đại diện cho một điểm trên bề mặt Trái Đất. Đường kẻ các đoạn được vẽ giữa các điểm theo thứ tự mà bạn thêm chúng đối với đường dẫn. Bạn có thể thêm các điểm vào đường dẫn bằng addCoordinate: hoặc 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];
      

Thêm một hình nhiều đường

1. Tạo một đối tượng GMSMutablePath.
2. Đặt các điểm trong đường dẫn bằng addCoordinate: hoặc addLatitude:longitude:.
3. Tạo thực thể cho đối tượng GMSPolyline mới bằng cách sử dụng đường dẫn làm một đối số.
4. Thiết lập các thuộc tính khác, chẳng hạn như strokeWidth và strokeColor, nếu cần.
5. Đặt thuộc tính map của GMSPolyline.
6. Hình nhiều đường sẽ xuất hiện trên bản đồ.

Đoạn mã sau đây thêm một hình chữ nhật vào bản đồ:

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;
      

Xoá hình nhiều đường

Bạn có thể xoá một hình nhiều đường khỏi bản đồ bằng cách đặt map của GMSPolyline vào nil. Ngoài ra, bạn có thể xoá tất cả lớp phủ (bao gồm hình nhiều đường và các hình dạng khác) trên bản đồ bằng cách gọi GMSMapView clear.

mapView.clear()
      

[mapView clear];
      

Tuỳ chỉnh hình nhiều đường

Đối tượng GMSPolyline cung cấp một số thuộc tính để kiểm soát sự xuất hiện của đường. Trình bổ trợ này hỗ trợ các tuỳ chọn sau:

strokeWidth

Chiều rộng của toàn bộ đường, tính bằng điểm trên màn hình. Giá trị mặc định là 1 Chiều rộng không điều chỉnh tỷ lệ khi thu phóng bản đồ.

geodesic

Khi YES, hãy kết xuất cạnh hình nhiều đường này dưới dạng trắc địa. Đoạn trắc địa đi theo con đường ngắn nhất dọc theo bề mặt Trái Đất và có thể hiện ra dưới dạng đường cong trên bản đồ với phép chiếu Mercator. Phi trắc địa các phân đoạn được vẽ dưới dạng đường thẳng trên bản đồ. Mặc định là NO.

spans

Dùng để chỉ định màu của một hoặc nhiều đoạn đường trong hình nhiều đường. Chiến lược phát hành đĩa đơn thuộc tính spans là một mảng GMSStyleSpan . Đặt thuộc tính spans là cách ưu tiên thay đổi màu của hình nhiều đường.

strokeColor

Đối tượng UIColor chỉ định màu của hình nhiều đường. Mặc định là blueColor. Thuộc tính strokeColor sẽ bị bỏ qua nếu bạn đặt spans.

Đoạn mã sau đây sẽ thêm một hình nhiều đường dày từ Melbourne đến Perth, với nội suy trắc địa.

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;
      

Để sửa đổi một hình nhiều đường sau khi hình đó đã được thêm vào bản đồ, hãy nhớ giữ lại đối tượng GMSPolyline.

polyline.strokeColor = .blue
      

polyline.strokeColor = [UIColor blueColor];
      

Thay đổi màu của hình nhiều đường

Hình nhiều đường được vẽ dưới dạng một loạt các đoạn trên bản đồ. Bạn có thể thay đổi màu này phân đoạn riêng lẻ hoặc toàn bộ dòng với thuộc tính spans. Trong khi thuộc tính này cung cấp cho bạn quyền kiểm soát chi tiết đối với màu của hình nhiều đường, tồn tại nhiều tiện ích cho phép bạn áp dụng một kiểu duy nhất cho toàn bộ .

Đoạn mã dưới đây sử dụng phương thức spanWithColor: để thay đổi màu của toàn bộ dòng thành màu đỏ.

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

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

Ngoài ra, nếu bạn đã có quyền truy cập vào GMSStrokeStyle , bạn có thể sử dụng phương thức spanWithStyle:.

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

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

Trước phiên bản 1.7 của SDK Maps dành cho iOS, thuộc tính duy nhất strokeColor có sẵn để đặt toàn bộ màu của GMSPolyline. Thuộc tính spans được ưu tiên hơn so với strokeColor

polyline.strokeColor = .red
      

polyline.strokeColor = [UIColor redColor];
      

Kiểu

Nếu ứng dụng của bạn áp dụng cùng một màu nét nhiều lần, bạn có thể thấy tính năng này hữu ích để xác định kiểu có thể sử dụng lại. Kiểu nhiều đường được chỉ định bằng cách sử dụng Đối tượng GMSStrokeStyle. Kiểu nét có thể là màu hoặc độ dốc từ màu này sang màu khác. Sau khi tạo bạn có thể áp dụng kiểu này cho GMSStyleSpan bằng phương thức 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];
      

Kiểu của span sẽ tiếp tục cho đến khi kết thúc hình nhiều đường hoặc cho đến khi hình ảnh mới kiểu được đặt. Bạn có thể thay đổi màu của toàn bộ đường bằng cách đặt thuộc tính spans tính chất của một hình nhiều đường với một GMSStyleSpan Ví dụ minh hoạ cách áp dụng hiệu ứng chuyển màu trên toàn bộ chiều dài của hình nhiều đường.

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

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

Thay đổi màu của các đoạn đường riêng lẻ

Nếu bạn muốn tạo kiểu riêng cho từng đoạn của hình nhiều đường, bạn có thể thực hiện việc này bằng cách tạo một mảng các đối tượng GMSStyleSpan và truyền tham số này với thuộc tính spans. Theo mặc định, mỗi mục trong mảng sẽ đặt màu của phân đoạn đường tương ứng. Nếu mảng có nhiều phần tử hơn các phân đoạn trên dòng, thì các phần tử thêm vào sẽ bị bỏ qua. Nếu có ít hơn trong mảng, GMSStyleSpan cuối cùng sẽ mô tả màu cho phần còn lại của dòng.

Bạn có thể sử dụng các khối màu và/hoặc hình nhiều đường chuyển màu để biểu thị những thay đổi dọc theo hình nhiều đường của bạn, chẳng hạn như cao độ hoặc tốc độ. Đoạn mã dưới đây đặt màu của hai đoạn đầu của hình nhiều đường màu đỏ và phần còn lại của đường thẳng là chuyển màu từ đỏ sang vàng.

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

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

Bạn có thể sử dụng phương thức spanWithStyle:segments: để đặt kiểu cho một số phân khúc cùng một lúc. Ví dụ: Mã sau đây tương đương với mã ở trên. Độ dài phân đoạn của GMSStyleSpan cuối cùng luôn bị bỏ qua vì kiểu được dùng để mô tả phần còn lại của dòng.

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

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

Phân đoạn thập phân

Phân đoạn cũng có thể được chỉ định dưới dạng giá trị phân số. Thao tác này sẽ áp dụng kiểu thành phân đoạn, có khả năng gây ra chia tách phân khúc. Mỗi GMSStyleSpan bắt đầu ngay sau trước đó: trong ví dụ bên dưới, màu xám bắt đầu từ 1⁄2 đến đoạn thứ hai, rồi tiếp tục đi đến đoạn thứ ba.

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

Thêm mẫu màu lặp lại vào hình nhiều đường

Nếu muốn thêm hoa văn vào hình nhiều đường, bạn có thể sử dụng Phương thức tiện ích GMSStyleSpans trong GMSGeometryUtils. Chiến lược phát hành đĩa đơn Phương thức GMSStyleSpans chấp nhận 2 mảng xác định mẫu lặp lại. Một mảng đặt các kiểu nên được lặp lại và mảng còn lại xác định khoảng thời gian lặp lại. Khi sử dụng cùng nhau, bạn có thể tạo một mẫu có thể được áp dụng trên hình nhiều đường bất kỳ, bất kể độ dài hoặc số lượng đoạn sẵn có.

Ví dụ: đoạn mã dưới đây xác định một hình nhiều đường có màu đen và trắng mẫu xen kẽ. Chiều dài của nó được tính theo mét dọc theo tuyến rhumb (tính theo Mercator, đây là một đường thẳng) vì loại được chỉ định là 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);
      

Hình nhiều đường có dấu của Sprite

Hình nhiều đường có dấu của Sprite cho phép bạn tạo hình nhiều đường bằng cách sử dụng bitmap lặp lại hình ảnh bạn chọn. Hình dạng xuất hiện với một nét nền rõ ràng, nhưng con dấu không bị cắt bớt quanh các góc dòng – điều này rất hữu ích cho các trường hợp như để minh hoạ chỉ đường đi bộ.

Bạn có thể sử dụng tính năng này bằng cách sử dụng GMSSpriteStyle và thiết lập làm con dấu sử dụng stampStyle của GMSStrokeStyle thuộc tính này.

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;
      

Hình nhiều đường nét có hoạ tiết

Hình nhiều đường được đóng dấu hoạ tiết cho phép bạn tạo hình nhiều đường bằng cách sử dụng hoạ tiết tuỳ theo lựa chọn của bạn. Hình dạng có thể xuất hiện với màu đồng nhất hoặc chuyển màu rõ ràng nét vẽ trong nền. Hoạ tiết sẽ đổi kích thước khi mức thu phóng thay đổi. Hình ảnh ở cuối của điểm cuối hoặc đầu đường dẫn hoặc điểm đường dẫn bị cắt bớt khi thu phóng nhất định cấp độ.

Bạn có thể sử dụng tính năng này bằng cách sử dụng GMSTextureStyle và cài đặt nó dưới dạng con dấu sử dụng stampStyle của GMSStrokeStyle thuộc tính này.

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;
      

Các chức năng của bản đồ

Tài sản mapCapabilities trên GMSMapView thêm phương thức có lập trình đang kiểm tra các đối tượng dành riêng cho bản đồ. Điều này rất hữu ích khi muốn biết liệu một số bản đồ capabilities nhất định sẵn có trước khi gọi các API cụ thể. Chiến dịch này truy vấn xác định liệu chế độ xem bản đồ có hỗ trợ các hình nhiều đường có dấu của Sprite hay không.

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;
      

Mẫu này cho phép bạn đăng ký các thay đổi và phản ứng với các nội dung cập nhật về bản đồ của bạn trạng thái xem. Bạn cũng có thể triển khai didChangeMapCapabilities trên GMSMapViewDelegate để nhận thông tin cập nhật về tính năng tình trạng còn hàng.

Đa giác

Đa giác tương tự như hình nhiều đường ở chỗ chúng bao gồm một loạt toạ độ theo một trình tự có thứ tự. Tuy nhiên, thay vì mở rộng, đa giác được thiết kế để xác định các vùng đồng nhất trong một vòng khép kín. Đa giác là được xác định trong SDK bản đồ dành cho iOS bởi GMSPolygon .

Bạn có thể thêm GMSPolygon vào bản đồ theo cách tương tự như bạn thêm GMSPolyline. Trước tiên, hãy chỉ định đường dẫn bằng cách tạo một đối tượng GMSMutablePath tương ứng và thêm điểm vào đối tượng đó. Các điểm này tạo thành đường viền của đa giác. Mỗi CLLocationCoordinate2D biểu thị một điểm trên bề mặt Trái Đất. Các đoạn thẳng được vẽ giữa các điểm theo thứ tự bạn thêm chúng vào đường dẫn.

Thêm đa giác

1. Tạo một đối tượng GMSMutablePath.
2. Đặt các điểm trong đường dẫn bằng addCoordinate: hoặc addLatitude:longitude:. Những điểm này tạo thành đường viền của đa giác.
3. Tạo thực thể cho đối tượng GMSPolygon mới bằng cách sử dụng đường dẫn làm một đối số.
4. Đặt các thuộc tính khác, chẳng hạn như strokeWidth, strokeColor và fillColor, như mong muốn.
5. Gán đa giác cho đối tượng GMSMapView bằng cách đặt thuộc tính thuộc tính GMSPolygon.map.
6. Đa giác sẽ xuất hiện trên bản đồ.

Đoạn mã sau đây sẽ thêm một hình chữ nhật vào bản đồ.

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

Bạn có thể tuỳ chỉnh hình thức của đa giác trước khi thêm đa giác vào bản đồ và sau khi dữ liệu đó được thêm vào bản đồ.

Xoá đa giác

Xóa Đa giác bằng cách đặt thuộc tính GMSPolygon.map của đa giác thành nil và tách layer từ phần tử mẹ.

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

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

Vòng tròn

Ngoài lớp GMSPolygon chung, lớp SDK Maps dành cho iOS cũng bao gồm GMSCircle, cho phép bạn để vẽ các vòng tròn trên bề mặt trái đất.

Để lập đường tròn, bạn phải chỉ định hai thuộc tính sau:

• position trong vai trò CLLocationCoordinate2D.
• radius mét.

Khi đó, một đường tròn được định nghĩa là tập hợp tất cả các điểm trên bề mặt Trái Đất cách center cho sẵn radius mét. Vì cách Phép chiếu Mercator được API Maps sử dụng kết xuất hình cầu trên một bề mặt phẳng, nó xuất hiện dưới dạng một vòng tròn gần như hoàn hảo trên bản đồ khi nằm gần gần xích đạo và ngày càng xuất hiện không tròn (trên màn hình) dưới dạng vòng tròn di chuyển ra khỏi đường xích đạo.

Thêm vòng kết nối

Đoạn mã sau đây thêm một vòng tròn vào bản đồ:

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;
      

Bạn có thể tuỳ chỉnh cả giao diện của vòng tròn trước khi thêm vòng tròn đó vào bản đồ và sau khi dữ liệu đó được thêm vào bản đồ.

Tuỳ chỉnh vòng kết nối

Bạn có thể chỉ định màu tuỳ chỉnh và độ rộng nét bằng cách sửa đổi thuộc tính của GMSCircle. Trình bổ trợ này hỗ trợ các tuỳ chọn sau:

fillColor

Đối tượng UIColor chỉ định màu bên trong của vòng kết nối. Giá trị mặc định là minh bạch.

strokeColor

Đối tượng UIColor chỉ định màu của vòng tròn đề cương. Mặc định là blackColor.

strokeWidth

Độ dày của đường viền của vòng tròn, tính bằng các điểm trên màn hình. Giá trị mặc định là 1 Độ dày sẽ không thay đổi tỷ lệ khi thu phóng bản đồ.

Đoạn mã sau đây sẽ thêm một vòng tròn dày màu đỏ có màu đỏ bán trong suốt nội thất.

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;
      

Tạo một đa giác rỗng

Bạn có thể kết hợp nhiều đường dẫn trong một đối tượng GMSPolygon để tạo các hình dạng phức tạp, như các vòng tròn tô màu nền hoặc hình bánh rán (trong đó khu vực đa giác xuất hiện bên trong đa giác dưới dạng các hình riêng biệt). Hình dạng phức tạp cấu trúc của nhiều đường dẫn.

Tạo một đa giác có đường dẫn xác định diện tích lớn nhất được bao phủ bởi đa giác. Sau đó, chỉ định thuộc tính holes của đa giác dưới dạng một mảng gồm một hoặc nhiều đối tượng GMSPath hơn. Các đối tượng này xác định các lỗ hổng trong đa giác.

Nếu một đường đi nhỏ hơn được bao quanh hoàn toàn bởi đường dẫn lớn hơn, nó sẽ trông giống như một mảnh của đa giác đã bị xoá.

Mã mẫu sau đây sẽ tạo một đa giác có 2 lỗ:

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;