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ủa mình. Các hình dạng sau được hỗ trợ:
- Hình nhiều đường là một chuỗi các đoạn đườ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ể dùng để đánh dấu các đường đi 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 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
Bạn có thể vẽ các đường trên bản đồ bằng hình nhiều đường. Đối tượng GMSPolyline
đại diện cho một trình tự các vị trí theo thứ tự, hiển thị dưới dạng một chuỗi các phân đoạn dòng. 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 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 có từ 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 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 một hình nhiều đường
- Tạo một đối tượng
GMSMutablePath
. - Đặt các điểm trong đường dẫn bằng phương thức
addCoordinate:
hoặcaddLatitude:longitude:
. - Tạo thực thể cho đối tượng
GMSPolyline
mới bằng cách sử dụng đường dẫn làm đối số. - Thiết lập các thuộc tính khác, chẳng hạn như
strokeWidth
vàstrokeColor
, nếu cần. - Đặt thuộc tính
map
củaGMSPolyline
. - 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;
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 thuộc tính map
của GMSPolyline
thành nil
. Ngoài ra, bạn có thể xoá tất 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. 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 sẽ không thay đổi theo 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 đường ngắn nhất dọc theo bề mặt Trái Đất và có thể xuất hiện dưới dạng đường cong trên bản đồ với phép chiếu Mercator. Các đoạn phi địa hình đượ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. Thuộc tính span là một mảng các đối tượng
GMSStyleSpan
. Đặt thuộc tínhspans
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ínhstrokeColor
sẽ bị bỏ qua nếu bạn đặtspans
.
Đoạn mã sau đây sẽ thêm một hình nhiều đường dày từ Melbourne đến Perth, bằng nội suy địa lý.
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 một hình nhiều đường sau khi hình đó được 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 loạt các đoạn trên bản đồ. Bạn có thể thay đổi màu của từng đoạn riêng lẻ hoặc toàn bộ dòng bằng thuộc tính spans
. Mặc dù thuộc tính này cho phép bạn kiểm soát chi tiết việc tô màu hình nhiều đường, nhưng cũng có một số tiện ích cho phép bạn áp dụng một kiểu duy nhất cho toàn bộ đường.
Đ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 đỏ.
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, bạn có thể đặt một thuộc tính strokeColor
để đặt toàn bộ màu của GMSPolyline
. Thuộc tính spans
được ưu tiên hơn 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 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àu đồng nhất hoặc chuyển màu 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 hình nhiều đường kết thúc hoặc cho đến khi bạn đặt kiểu mới. Bạn có thể thay đổi màu của toàn bộ đường bằng cách đặt thuộc tính spans
của hình nhiều đường thành một GMSStyleSpan
. Ví dụ này 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 các đoạn đường riêng lẻ
Nếu 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 bằng cách tạo một mảng gồm các đối tượng GMSStyleSpan
rồi truyền giá trị 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 số lượng phần tử trong mảng nhiều hơn số phân đoạn trong dòng, thì các phần tử bổ sung 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 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, 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 tiên của hình nhiều đường thành màu đỏ và phần còn lại của đường vẽ 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 đâ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.
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 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 cho số phân đoạn, từ đó có thể gây ra sự phân tách trong một phân đoạn. Mỗi GMSStyleSpan
bắt đầu ngay sau phân đoạn trước: trong ví dụ bên dưới, màu xám bắt đầu từ 1⁄2 qua phân đoạn thứ hai và tiếp tục kéo dài đến 1⁄2 qua 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 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
. 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, còn mảng còn lại xác định khoảng thời gian lặp lại. Khi kết hợp với nhau, bạn có thể tạo ra 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 đ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 nó được coi là mét dọc theo đường rhumb (trong Mercator, đây là đường thẳng) vì loại đượ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ó 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 hiển thị với nét nền rõ ràng, nhưng con dấu không bị cắt bớt quanh các góc đường – điều này hữu ích trong các tình huống như dấu chấm để minh hoạ hướ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à đặt tính năng này làm con 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 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 lặp lại tuỳ ý. Hình dạng có thể xuất hiện bằng nét vẽ rõ ràng, có màu đồng nhất hoặc trong 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 bị cắt bớt ở một số mức thu phóng nhất định.
Bạn có thể sử dụng tính năng này bằng cách sử dụng GMSTextureStyle
và đặt giá trị này 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;
Các chức năng của bản đồ
Thuộc tính mapCapabilities
trên GMSMapView
thêm quy trình 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 đồ nhất định capabilities
có sẵn hay không trước khi gọi các API cụ thể. Truy vấn này 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.
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ý các thay đổi và phản ứng với nội dung cập nhật thông qua trạng thái 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 một trình tự có thứ tự. Tuy nhiên, thay vì là đa giác mở, đa giác được thiết kế để xác định các vùng đặc trong một vòng khép kín. Đa giác được lớp GMSPolygon
xác định trong SDK Maps dành cho iOS.
Bạn có thể thêm GMSPolygon
vào bản đồ theo cách tương tự như 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 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 chúng vào đường dẫn.
Thêm đa giác
- Tạo một đối tượng
GMSMutablePath
. - Đặt các điểm trong đường dẫn bằng phương thức
addCoordinate:
hoặcaddLatitude:longitude:
. Các điểm này tạo thành đường viền của đa giác. - Tạo thực thể cho đối tượng
GMSPolygon
mới bằng cách sử dụng đường dẫn làm đối số. - Đặt các thuộc tính khác, chẳng hạn như
strokeWidth
,strokeColor
vàfillColor
, nếu muốn. - Gán đa giác cho đối tượng
GMSMapView
bằng cách đặt thuộc tínhGMSPolygon.map
. - Đ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 đồ.
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 được 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
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 Maps dành cho iOS còn 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 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 phép chiếu Mercator mà API Maps sử dụng hiển thị một hình cầu trên một bề mặt phẳng, nên phép chiếu này 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à xuất hiện ngày càng 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ể tuỳ chỉnh giao diện của vòng tròn trước và sau khi thêm nó 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 vẽ bằng cách sửa đổi các 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 tròn. Giá trị mặc định là minh bạch. strokeColor
- Đối tượng
UIColor
chỉ định màu đường viền của vòng tròn. 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 màu đỏ dày với phần bên trong 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 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
duy nhất để tạo các hình dạng phức tạp, chẳng hạn như các vòng tròn được tô màu nền hoặc hình bánh vòng (trong đó 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 dạng 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 khu vực 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
. Các đối tượng này sẽ xác định các lỗ trong đa giác.
Nếu đường dẫn nhỏ hơn được đường dẫn lớn hơn bao bọc hoàn toàn, thì sẽ có vẻ như như thể một phần của đa giác đã bị xoá.
Mã mẫu sau đây sẽ tạo một đa giác có 2 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;