Hình dạng

Chọn nền tảng: Android iOS JavaScript

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

  • Hình nhiều đường là một loạt các đoạn thẳng được kết nối có thể tạo thành bất kỳ hình dạng nào bạn muốn và có thể được dùng để đánh dấu các đường dẫn 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 đồ.
  • Hình tròn là một phép chiếu chính xác về mặt địa lý của một hình tròn trên bề mặt Trái đất.

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

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

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

Thêm 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 phương thức addCoordinate: hoặc addLatitude:longitude:.
  3. Tạo bản sao của đối tượng GMSPolyline mới bằng cách sử dụng đường dẫn làm đối số.
  4. Thiết lập các thuộc tính khác, chẳng hạn như strokeWidthstrokeColor, 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 đồ:

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;
      

Một hình nhiều đường hình chữ nhật

Loại bỏ 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 thuộc tính map của GMSPolyline thành nil. Ngoài ra, bạn có thể xoá tất cả các lớp phủ (bao gồm cả hình nhiều đường và các hình dạng khác) trên bản đồ bằng cách gọi phương thức GMSMapView clear.

Swift

mapView.clear()
      

Objective-C

[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 giao diện của đường đó. API này hỗ trợ các tuỳ chọn sau:

strokeWidth
Chiều rộng của toàn bộ đường kẻ, 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 thay đổi theo tỷ lệ khi bản đồ được thu phóng.
geodesic
Khi YES, hãy kết xuất cạnh nhiều đường này dưới dạng một đường trắc địa. Các đoạn trắc địa đi theo đường đi ngắn nhất dọc theo bề mặt Trái đất và có thể xuất hiện dưới dạng các đường cong trên bản đồ có phép chiếu Mercator. Các đoạn không có đường trắc địa sẽ đượ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 trong một hình nhiều đường. Thuộc tính spans là một mảng các đối tượ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 thêm một đường nhiều đường dày từ Melbourne đến Perth, với nội suy trắc địa.

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;
      

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

Swift

polyline.strokeColor = .blue
      

Objective-C

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 chuỗi các đoạn trên bản đồ. Bạn có thể thay đổi màu của từng đoạn hoặc toàn bộ đường kẻ bằng thuộc tính spans. Mặc dù 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 một hình nhiều đường, nhưng có một số tiện lợi cho phép bạn áp dụng một kiểu duy nhất cho toàn bộ đường kẻ.

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

Swift

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

Objective-C

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

Ngoài ra, nếu đã có quyền truy cập vào đối tượng GMSStrokeStyle, bạn có thể sử dụng phương thức 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]];
      

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.

Swift

polyline.strokeColor = .red
      

Objective-C

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 vẽ nhiều lần, bạn có thể thấy hữu ích khi xác định một 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 vẽ có thể là một màu đồng nhất hoặc một độ dốc từ màu này sang màu khác. Sau khi tạo một kiểu, bạn có thể áp dụng kiểu đó cho GMSStyleSpan bằng phương thức 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];
      

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 một kiểu mới được đặt. Bạn có thể thay đổi màu của toàn bộ đường kẻ bằng cách đặt thuộc tính spans của hình nhiều đường thành 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.

Swift

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

Objective-C

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

Thay đổi màu của từng đoạn thẳng

Nếu muốn tạo kiểu riêng cho từng phân đoạn của hình nhiều đường, bạn có thể thực hiện bằng cách tạo một mảng gồm các đối tượng GMSStyleSpan và truyền đối tượng này đến 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 hàng tương ứng. Nếu có nhiều phần tử trong mảng hơn các phân đoạn trong dòng, thì các phần tử thừa sẽ bị bỏ qua. Nếu có ít phần 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 đườ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ị các thay đổi dọc theo hình nhiều đường, chẳng hạn như độ cao hoặc tốc độ. Đoạn mã dưới đây đặt màu của 2 phân đoạn đầu tiên của hình nhiều đường thành màu đỏ và phần còn lại của đường kẻ là chuyển màu từ đỏ sang vàng.

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

Bạn có thể sử dụng phương thức spanWithStyle:segments: để đặt kiểu cho nhiều phân đoạn cùng một lúc. Ví dụ: mã sau 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 này dùng để mô tả phần còn lại của đường.

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

Phân đoạn

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

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

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

Nếu muốn thêm một mẫu vào hình nhiều đường, bạn có thể sử dụng phương thức tiện ích GMSStyleSpans trong GMSGeometryUtils. Phương thức GMSStyleSpans chấp nhận 2 mảng xác định một mẫu lặp lại. Một mảng đặt các kiểu cần được lặp lại, còn 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ể áp dụng trên mọi hình nhiều đường, bất kể độ dài hoặc số lượng phân đoạn có sẵn.

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

Hình nhiều đường có đóng 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 hình ảnh bitmap lặp lại mà bạn chọn. Hình dạng sẽ xuất hiện với nét vẽ nền rõ ràng, nhưng con dấu không bị cắt bớt xung quanh các góc đường kẻ – nên chúng hữu ích trong những trường hợp như dấu chấm để minh hoạ chỉ đường đi bộ.

Hình nhiều đường có dấu sprite

Bạn có thể sử dụng tính năng này bằng cách sử dụng GMSSpriteStyle và đặt nó làm dấu bằng cách sử dụng thuộc tính stampStyle của 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;
      

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

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

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

Bạn có thể sử dụng tính năng này bằng cách sử dụng GMSTextureStyle và đặt nó làm dấu bằng cách sử dụng thuộc tính stampStyle của 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;
      

Chức năng của bản đồ

Thuộc tính mapCapabilities trên GMSMapView bổ sung tính năng kiểm tra có lập trình cho các tính năng dành riêng cho bản đồ. Điều này rất hữu ích khi muốn biết liệu bản đồ capabilities nhất định có sẵn hay không trước khi gọi các API cụ thể. Truy vấn này sẽ xác định xem chế độ xem bản đồ có hỗ trợ Sprite Closeded Polylines hay không.

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;
      

Mẫu này cho phép bạn đăng ký theo dõi các thay đổi và phản ứng với nội dung cập nhật bằng trạng thái chế độ xem bản đồ. Bạn cũng có thể triển khai didChangeMapCapabilities trên GMSMapViewDelegate để nhận thông tin cập nhật về phạm vi cung cấp tính nă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 các toạ độ theo trình tự có thứ tự. Tuy nhiên, thay vì là hình thức mở, đa giác được thiết kế để xác định các vùng đồng nhất trong một vòng kín. Đa giác được xác định trong SDK Maps dành cho iOS bằng lớp GMSPolygon.

Bạn có thể thêm GMSPolygon vào bản đồ theo cách tương tự như khi thêm GMSPolyline. Trước tiên, hãy chỉ định đường dẫn của đối tượng đó bằng cách tạo đối tượng GMSMutablePath tương ứng và thêm các đ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 đại diện cho 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ự mà bạn thêm các điểm đó 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 phương thức addCoordinate: hoặc addLatitude:longitude:. Các điểm này tạo thành đường viền của đa giác.
  3. Tạo bản sao của đối tượng GMSPolygon mới bằng cách sử dụng đường dẫn làm đối số.
  4. Đặt các thuộc tính khác, chẳng hạn như strokeWidth, strokeColorfillColor, nếu muốn.
  5. Gán đa giác cho một đối tượng GMSMapView bằng cách đặt thuộc tính GMSPolygon.map.
  6. Đa giác 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 đồ.

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;
      

Bạn có thể tuỳ chỉnh giao diện của đa giác cả trước khi thêm vào bản đồ và sau khi đã thêm vào bản đồ.

Xoá đa giác

Xoá Đ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 khỏi phần tử mẹ.

Swift

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

Objective-C

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

Vòng tròn

Ngoài lớp GMSPolygon chung, SDK Bản đồ 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.

Để xây dựng một vòng tròn, bạn phải chỉ định hai thuộc tính sau:

  • position dưới dạng CLLocationCoordinate2D.
  • radius mét.

Sau đó, vò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 radius mét. Do cách chiếu Mercator mà API Maps sử dụng hiển thị một hình cầu trên một mặt phẳng, nó sẽ 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 đường xích đạo và ngày càng xuất hiện không tròn (trên màn hình) khi 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 đồ:

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;
      

Bạn có thể tùy chỉnh giao diện của vòng tròn cả trước khi thêm vào bản đồ và sau khi vòng tròn đã được thêm vào bản đồ.

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

Bạn có thể chỉ định màu và độ rộng nét tuỳ chỉnh bằng cách sửa đổi các thuộc tính của GMSCircle. API 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 tròn. Giá trị mặc định là minh bạch.
strokeColor
Đối tượng UIColor chỉ định màu cho đường viền của vòng tròn. Mặc định là blackColor.
strokeWidth
Độ dày của đường viền vòng tròn, tính bằng điểm màn hình. Giá trị mặc định là 1. Độ dày không chia theo tỷ lệ khi bản đồ được thu phóng.

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

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;
      

Tạo đ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 duy nhất để tạo các hình dạng phức tạp, chẳng hạn như vành đai tô màu nền hoặc hình bánh vòng (nơi các 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). Các hình dạng phức tạp là sự kết hợp của nhiều đường dẫn.

Tạo một đa giác có đường dẫn chỉ đị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, xác định các lỗ hổng trong đa giác.

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

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

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;