도형

플랫폼 선택: Android iOS JavaScript

iOS용 Maps SDK에서는 다양한 방법으로 지도에 도형을 추가할 수 있습니다. 있습니다. 다음과 같은 셰이프가 지원됩니다.

  • 다중선은 일련의 연결된 선분으로서 모든 모양을 형성할 수 있습니다. 지도에 경로를 표시하는 데 사용할 수 있습니다.
  • 다각형(Polygon)은 닫혀 있는 도형으로서, 지도에서 영역을 표시하는 데 사용할 수 있습니다.
  • 원은 지구 표면에 있는 원을 지리적으로 정확하게 투영한 것입니다. 표시 영역입니다.

다양한 방식으로 각 셰이프의 모양을 수정할 수 있습니다.

다중선

폴리라인으로 지도에 선을 그릴 수 있습니다. GMSPolyline 객체는 위치가 정해진 순서를 나타내며 선분 다중선의 색상을 설정하려면 GMSStrokeStyle

폴리라인을 만들려면 해당하는 GMSMutablePath 객체를 반환합니다. 각 CLLocationCoordinate2D는 지표면의 한 지점을 나타냅니다. 선 선분은 추가한 순서에 따라 점 사이에 그려집니다. 추가할 수 있습니다. addCoordinate: 또는 addLatitude:longitude: 메서드와 함께 사용할 수 있습니다.

Swift

let path = GMSMutablePath()
path.add(CLLocationCoordinate2D(latitude: -33.85, longitude: 151.20))
path.add(CLLocationCoordinate2D(latitude: -33.70, longitude: 151.40))
path.add(CLLocationCoordinate2D(latitude: -33.73, longitude: 151.41))
let polyline = GMSPolyline(path: path)

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addCoordinate:CLLocationCoordinate2DMake(-33.85, 151.20)];
[path addCoordinate:CLLocationCoordinate2DMake(-33.70, 151.40)];
[path addCoordinate:CLLocationCoordinate2DMake(-33.73, 151.41)];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];

다중선 추가

  1. GMSMutablePath 객체를 만듭니다.
  2. addCoordinate: 또는 addLatitude:longitude: 메서드와 함께 사용할 수 있습니다.
  3. 경로를GMSPolyline 인수입니다.
  4. 필요에 따라 strokeWidth 및 strokeColor와 같은 기타 속성을 설정합니다.
  5. GMSPolyline의 map 속성을 설정합니다.
  6. 다중선이 지도에 표시됩니다.

다음 코드 스니펫은 지도에 사각형을 추가합니다.

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;

직사각형 다중선

다중선 제거

GMSPolyline의 map를 설정하여 지도에서 다중선을 제거할 수 있습니다. 속성을 nil로 변경합니다. 또는 모든 오버레이( GMSMapView를 호출하여 지도에 다중선 및 기타 도형)를 표시할 수 있습니다. clear 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다.

Swift

mapView.clear()

Objective-C

[mapView clear];

다중선 맞춤설정

GMSPolyline 객체는 제어할 수 있는 여러 속성을 제공합니다. 확인할 수 있습니다. 지원되는 옵션은 다음과 같습니다.

strokeWidth
전체 선의 너비(화면 포인트 단위)입니다. 기본값은 1입니다. 너비 는 지도를 확대/축소할 때 배율이 조정되지 않습니다.
geodesic
YES인 경우 다중선 가장자리를 최단 거리로 렌더링합니다. 최단 거리 세그먼트 지구 표면을 따라 가장 짧은 경로를 따라가며 지도에 곡선으로 표시되며 메르카토르 투영법이 사용됩니다. 비최단 거리 구간은 지도에 직선으로 그려집니다. 기본값은 NO입니다.
spans
다중선에 있는 하나 이상의 선분 색상을 지정하는 데 사용됩니다. 이 spans 속성은 GMSStyleSpan의 배열임 객체입니다. 다음과 같은 경우 spans 속성을 설정하는 것이 좋습니다. 다중선의 색상을 변경합니다.
strokeColor
다중선의 색상을 지정하는 UIColor 객체입니다. 기본값은 blueColor입니다. strokeColor 속성 spans가 설정되면 무시됩니다.

다음 스니펫은 멜버른에서 퍼스까지 굵은 다중선을 최단 거리 보간 유형입니다.

Swift

let path = GMSMutablePath()
path.addLatitude(-37.81319, longitude: 144.96298)
path.addLatitude(-31.95285, longitude: 115.85734)
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 10.0
polyline.geodesic = true
polyline.map = mapView

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeWidth = 10.f;
polyline.geodesic = YES;
polyline.map = mapView;

지도에 폴리라인을 추가한 후 수정하려면 해당 폴리라인을 계속 누르고 있어야 합니다. GMSPolyline 객체

Swift

polyline.strokeColor = .blue

Objective-C

polyline.strokeColor = [UIColor blueColor];

다중선의 색상 변경

폴리라인은 지도 위에 일련의 세그먼트로 그려집니다. 색상을 변경할 수 있습니다. spans 속성을 사용하여 개별 세그먼트 또는 선 전체를 표시할 수 있습니다. 동안 이 속성을 사용하면 다중선의 색상을 세밀하게 제어할 수 있습니다. 전체 셀에 단일 스타일을 적용할 수 있는 몇 가지 편의성이 있습니다. 행입니다.

아래 스니펫은 spanWithColor: 메서드를 사용하여 빨간색으로 바꿉니다.

Swift

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

Objective-C

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

또는 GMSStrokeStyle에 대한 액세스 권한이 이미 있는 경우 객체가 있으면 spanWithStyle: 메서드를 사용할 수 있습니다.

Swift

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

Objective-C

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

iOS용 Maps SDK 버전 1.7 이전에는 단일 속성이 strokeColor을(를) 사용하여 GMSPolyline spans 속성이 strokeColor입니다.

Swift

polyline.strokeColor = .red

Objective-C

polyline.strokeColor = [UIColor redColor];

스타일

앱에서 동일한 획 색상을 여러 번 적용하는 경우 유용할 수 있습니다. 사용하여 재사용 가능한 스타일을 정의할 수 있습니다. 다중선 스타일은 GMSStrokeStyle 객체 획 스타일은 실선 또는 한 색상에서 다른 색상으로의 그라데이션입니다. 만든 후에는 GMSStyleSpan에 적용할 수 있습니다. spanWithStyle: 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다.

Swift

// Create two styles: one that is solid blue, and one that is a gradient from red to yellow
let solidBlue = GMSStrokeStyle.solidColor(.blue)
let solidBlueSpan = GMSStyleSpan(style: solidBlue)
let redYellow = GMSStrokeStyle.gradient(from: .red, to: .yellow)
let redYellowSpan = GMSStyleSpan(style: redYellow)

Objective-C

// Create two styles: one that is solid blue, and one that is a gradient from red to yellow
GMSStrokeStyle *solidBlue = [GMSStrokeStyle solidColor:[UIColor blueColor]];
GMSStyleSpan *solidBlueSpan = [GMSStyleSpan spanWithStyle:solidBlue];
GMSStrokeStyle *redYellow =
    [GMSStrokeStyle gradientFromColor:[UIColor redColor] toColor:[UIColor yellowColor]];
GMSStyleSpan *redYellowSpan = [GMSStyleSpan spanWithStyle:redYellow];

span의 스타일은 다중선의 끝부분까지 또는 새로 설정됩니다. spans 속성을 설정하여 선 전체의 색상을 변경할 수 있습니다. 속성을 단일 GMSStyleSpan로 설정합니다. 이 예에는 은 다중선의 전체 길이에 그라데이션을 적용하는 방법을 보여줍니다.

Swift

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

Objective-C

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

개별 선분의 색상 변경

다중선의 각 선분의 스타일을 개별적으로 지정하려면 GMSStyleSpan 객체의 배열을 만들고 이 spans 속성에 추가합니다. 기본적으로 배열의 각 항목은 확인할 수 있습니다. 배열에 다음보다 더 많은 요소가 있는 경우 세그먼트가 있으면 추가 요소는 무시됩니다. 더 적은 수의 요소인 경우 마지막 GMSStyleSpan은 선의 나머지 부분에 대한 색상입니다.

색상 및/또는 그라데이션 다중선 블록을 사용하여 이동을 따라 변경사항을 나타낼 수 있습니다. 속성을 지정할 수 있습니다. 아래 스니펫은 선의 처음 두 선분이 빨간색으로 바뀌고, 선의 나머지 부분은 빨간색에서 노란색으로 그라데이션됩니다.

Swift

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

Objective-C

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

spanWithStyle:segments: 메서드를 사용하여 여러 속성의 스타일을 설정할 수 있습니다. 세그먼트를 만들 수 있습니다 예를 들어, 다음 코드는 위의 코드와 동일합니다. 마지막 GMSStyleSpan의 세그먼트 길이는 항상 무시됩니다. 스타일이 선의 나머지 부분을 설명하는 데 사용되기 때문입니다.

Swift

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

Objective-C

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

부분 세그먼트

세그먼트는 분수 값으로 지정될 수도 있습니다. 이렇게 하면 세그먼트 수가 많지 않으므로 단일 세그먼트에서 분할이 세그먼트입니다. 각 GMSStyleSpan는 이전 문장: 아래 예에서 회색 색상은 0.2~1.5에서 두 번째 세그먼트에서 1⁄2까지 세 번째 세그먼트까지 계속 진행합니다.

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

다중선에 반복 색상 패턴 추가

다중선에 패턴을 추가하려면 GMSGeometryUtils의 GMSStyleSpans 유틸리티 메서드 이 GMSStyleSpans 메서드는 반복 패턴을 정의하는 두 개의 배열을 허용합니다. 1개 배열은 반복해야 하는 스타일을 설정하고 나머지는 있습니다. 함께 사용하면 십자말풀이보다 길이나 선분 수에 관계없이 모든 다중선에 적용됩니다. 있습니다.

예를 들어, 아래 코드 스니펫은 흑백으로 다중선을 정의합니다. 번갈아 패턴을 보입니다. 그 길이는 로우 선( 유형이 다음과 같이 지정되므로 직선임) 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);

스프라이트 스탬프 처리된 다중선

스프라이트 스탬프 처리된 다중선을 사용하면 반복 비트맵을 사용하여 다중선을 만들 수 있음 선택할 수 있습니다. 도형이 배경 획으로 명확하게 보이지만 줄 모서리에서 잘리지 않기 때문에 다음과 같은 상황에서 유용합니다. 점 아이콘을 사용하여 도보 경로를 나타냅니다.

스프라이트 스탬프 처리된 다중선

GMSSpriteStyle를 사용하고 이를 설정하여 이 기능을 사용할 수 있습니다. GMSStrokeStyle의 stampStyle를 사용하여 스탬프로 설정 속성

Swift

let path = GMSMutablePath()
path.addLatitude(-37.81319, longitude: 144.96298)
path.addLatitude(-31.95285, longitude: 115.85734)
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 20
let image = UIImage(named: "imageFromBundleOrAsset")! // Image could be from anywhere
let stampStyle = GMSSpriteStyle(image: image)
let transparentStampStroke = GMSStrokeStyle.transparentStroke(withStamp: stampStyle)
let span = GMSStyleSpan(style: transparentStampStroke)
polyline.spans = [span]
polyline.map = mapView

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];
polyline.strokeWidth = 20;
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];

UIImage *image = [UIImage imageNamed:@"imageFromBundleOrAsset"];
GMSStrokeStyle *transparentStampStroke = [GMSStrokeStyle transparentStrokeWithStampStyle:[GMSSpriteStyle spriteStyleWithImage:image]];

GMSStyleSpan *span = [GMSStyleSpan spanWithStyle:transparentStampStroke];
polyline.spans = @[span];
polyline.map = _mapView;

텍스처 스탬프 처리된 다중선

텍스처 스탬프 처리된 다중선을 사용하면 사용할 수 있습니다. 도형은 단색 또는 그라데이션으로 명확하게 표시할 수 있습니다. 있습니다. 확대/축소 수준이 변경되면 텍스처 크기가 조정됩니다. 마지막에 이미지 표시 특정 확대/축소 시 경로 또는 경로 지점의 끝 또는 시작 부분이 잘립니다. 있습니다.

질감이 있는 다중선

GMSTextureStyle 및 설정을 사용하여 이 기능을 사용할 수 있습니다. GMSStrokeStyle의 stampStyle를 사용하여 스탬프로 설정합니다. 속성

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;

지도 기능

GMSMapView의 mapCapabilities 속성은 프로그래매틱을 추가합니다. 확인할 수 있습니다 이것은 특정 지도 capabilities를 특정 API를 호출하기 전에 사용할 수 있습니다. 이 쿼리는 지도뷰에서 스프라이트 스탬프가 적용된 다중선을 지원하는지 확인합니다.

Swift

let path = GMSMutablePath()
path.addLatitude(-37.81319, longitude: 144.96298)
path.addLatitude(-31.95285, longitude: 115.85734)
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 20
let image = UIImage(named: "imageFromBundleOrAsset")! // Image could be from anywhere
let spans: [GMSStyleSpan]
if (mapView.mapCapabilities.contains(.spritePolylines)) {
  let spriteStyle = GMSSpriteStyle(image: image)
  let stroke = GMSStrokeStyle.transparentStroke(withStamp: spriteStyle)
  spans = [ GMSStyleSpan(style: stroke) ]
} else {
  let stroke = GMSStrokeStyle.solidColor(.clear)
  stroke.stampStyle = GMSTextureStyle(image: image)
  spans = [ GMSStyleSpan(style: stroke) ]
}
polyline.spans = spans
polyline.map = mapView

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];

UIImage *_Nonnull image = [UIImage imageNamed:@"imageFromBundleOrAsset"]; // Image could be from anywhere

NSArray<GMSStyleSpan *> * spans;
if (_mapView.mapCapabilities & GMSMapCapabilityFlagsSpritePolylines) {
  GMSSpriteStyle *spriteStyle = [GMSSpriteStyle spriteStyleWithImage:image];
  GMSStrokeStyle *stroke = [GMSStrokeStyle transparentStrokeWithStampStyle:spriteStyle];
  spans = @[ [GMSStyleSpan spanWithStyle:stroke] ];
} else {
  GMSStrokeStyle *stroke = [GMSStrokeStyle solidColor:UIColor.clearColor];
  stroke.stampStyle = [GMSTextureStyle textureStyleWithImage:image];
  spans = @[ [GMSStyleSpan spanWithStyle:stroke] ];
}

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeWidth = 20;
polyline.spans = spans;
polyline.map = _mapView;

이 패턴을 사용하면 변경사항을 구독하고 지도로 업데이트에 반응할 수 있습니다. 뷰 상태입니다. 또한 다음 위치에 didChangeMapCapabilities를 구현할 수도 있습니다. GMSMapViewDelegate하여 기능 관련 업데이트 받기 제공되어야 합니다

다각형

다각형은 일련의 점선으로 구성된다는 점에서 다중선과 유사합니다. 좌표를 순서대로 정렬하세요. 하지만 개방형보다는 다각형은 닫힌 루프 내에서 채워진 영역을 정의하도록 설계되었습니다. 다각형은 iOS용 Maps SDK에서 GMSPolygon에 의해 정의됨 클래스에 대해 자세히 알아보세요.

다음을 추가하는 것과 동일한 방식으로 지도에 GMSPolygon를 추가할 수 있습니다. GMSPolyline 먼저, 해당하는 GMSMutablePath 객체를 만들고 여기에 점을 추가합니다. 이러한 점들은 다각형의 윤곽선을 형성합니다. CLLocationCoordinate2D마다 지구 표면의 한 지점을 나타냅니다. 선분은 각 부분마다 경로에 지점을 추가한 순서대로 추가합니다.

다각형 추가

  1. GMSMutablePath 객체를 만듭니다.
  2. addCoordinate: 또는 addLatitude:longitude: 메서드와 함께 사용할 수 있습니다. 이러한 점들은 다각형이 있습니다.
  3. 경로를GMSPolygon 인수입니다.
  4. 다른 속성 설정(예: strokeWidth, strokeColor, fillColor) 변경할 수 있습니다
  5. 다음과 같이 GMSMapView 객체에 다각형을 할당합니다. GMSPolygon.map 속성
  6. 다각형이 지도에 표시됩니다.

다음 코드 스니펫은 지도에 직사각형을 추가합니다.

Swift

// Create a rectangular path
let rect = GMSMutablePath()
rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude: 37.45, longitude: -122.2))
rect.add(CLLocationCoordinate2D(latitude: 37.36, longitude: -122.2))

// Create the polygon, and assign it to the map.
let polygon = GMSPolygon(path: rect)
polygon.fillColor = UIColor(red: 0.25, green: 0, blue: 0, alpha: 0.05);
polygon.strokeColor = .black
polygon.strokeWidth = 2
polygon.map = mapView

Objective-C

// Create a rectangular path
GMSMutablePath *rect = [GMSMutablePath path];
[rect addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.45, -122.0)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.45, -122.2)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.36, -122.2)];

// Create the polygon, and assign it to the map.
GMSPolygon *polygon = [GMSPolygon polygonWithPath:rect];
polygon.fillColor = [UIColor colorWithRed:0.25 green:0 blue:0 alpha:0.05];
polygon.strokeColor = [UIColor blackColor];
polygon.strokeWidth = 2;
polygon.map = mapView;

다각형을 지도에 추가하기 전에 모양을 맞춤설정할 수 있습니다. 지도에 추가된 후에 표시됩니다.

다각형 제거

GMSPolygon.map 속성을 nil로 설정하고 분리하여 다각형을 삭제합니다. 상위 요소의 layer를 반환합니다.

Swift

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

Objective-C

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

원

일반 GMSPolygon 클래스 외에도 iOS용 Maps SDK에는 GMSCircle도 포함되어 있어 을 사용하여 지구 표면에 원을 그리세요.

원을 구성하려면 다음 두 가지 속성을 지정해야 합니다.

  • CLLocationCoordinate2D로서의 position
  • radius(단위: 미터)

그러면 특정 center에서 radius 미터만큼 떨어진 지표면의 모든 지점들을 연결한 집합으로서 원이 정의됩니다. 왜냐하면 지도 API에서 사용하는 메르카토르 투영은 구를 평평한 표면에 렌더링합니다. 이 지점이 가까운 위치에 있으면 지도에 거의 완벽한 원으로 표시됩니다. 화면에서 원처럼 점점 비원형으로 나타납니다 (화면에 표시). 적도에서 멀어집니다.

원 추가하기

다음 코드 스니펫은 지도에 원을 추가합니다.

Swift

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

Objective-C

CLLocationCoordinate2D circleCenter = CLLocationCoordinate2DMake(37.35, -122.0);
GMSCircle *circle = [GMSCircle circleWithPosition:circleCenter
                                         radius:1000];
circle.map = mapView;

원을 지도에 추가하기 전에 모양을 맞춤설정할 수 있습니다. 지도에 추가된 후에 표시됩니다.

서클 맞춤설정

다음 속성을 수정하여 맞춤 색상과 획 두께를 지정할 수 있습니다. GMSCircle 지원되는 옵션은 다음과 같습니다.

fillColor
: 내부 색상을 지정하는 UIColor 객체입니다. 있습니다. 기본값은 '투명'입니다
strokeColor
: 원의 색상을 지정하는 UIColor 객체입니다. 있습니다. 기본값은 blackColor입니다.
strokeWidth
화면 포인트 단위로 표시되는 원의 윤곽선 두께입니다. 기본값은 1입니다. 지도를 확대/축소해도 두께는 조정되지 않습니다.

다음 스니펫은 빨간색 반투명한 빨간색 굵은 빨간색 원을 추가합니다. 있습니다.

Swift

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

Objective-C

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

빈 다각형 만들기

단일 GMSPolygon 객체에 여러 경로를 결합하여 채워진 고리나 도넛과 같이 복잡한 도형을 만들 수 있습니다. 은 다각형 내부에 별도의 도형으로 나타납니다. 복잡한 모양은 여러 경로의 구성이 될 수 있습니다.

에 해당하는 가장 큰 영역을 지정하는 경로로 폴리곤을 만듭니다. 있습니다. 그런 다음 다각형의 holes 속성을 하나 이상의 더 많은 GMSPath 객체가 있습니다. 이 객체는 다각형 내의 구멍을 정의합니다.

작은 경로가 큰 경로에 의해 완전히 둘러싸여 있으면 도형이 삭제되었습니다.

다음 코드 샘플에서는 구멍이 2개인 폴리곤을 생성합니다.

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;