마커 맞춤설정

플랫폼 선택: Android iOS JavaScript

다른 커스텀의 스크린샷 마커

고급 마커는 두 가지 클래스를 사용하여 마커를 정의합니다. GMSAdvancedMarker 클래스가 기본 마커를 제공합니다. 기능을 포함하며, GMSPinImageOptions에는 옵션이 포함되어 있습니다. 추가로 맞춤설정할 수 있습니다 이 페이지에서는 Google Maps JavaScript API v2에서 마커를 맞춤설정하는 방법을 다음 방법을 사용하세요.

  • 배경 색상 변경
  • 테두리 색상 변경
  • 글리프 색상 변경
  • 글리프 텍스트 변경
  • iconView 속성으로 맞춤 뷰 및 애니메이션 지원
<ph type="x-smartling-placeholder">고급 마커의 요소</ph>
그림 1: 고급 마커의 요소

배경 색상 변경

GMSPinImageOptions.backgroundColor 옵션을 사용하여 다음 작업을 할 수 있습니다. 마커의 배경 색상을 변경할 수 있습니다.

Swift

//...

let options = GMSPinImageOptions()
options.backgroundColor = .blue

let pinImage = GMSPinImage(options: options)
advancedMarker.icon = pinImage

advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];
options.backgroundColor = [UIColor blueColor];

GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];
customTextMarker.icon = pin;

customTextMarker.map = mapView;

테두리 색상 변경

GMSPinImageOptions.borderColor 옵션을 사용하여 변경합니다. 마커의 배경 색상입니다.

Swift

//...

let options = GMSPinImageOptions()
options.borderColor = .blue

let pinImage = GMSPinImage(options: options)
advancedMarker.icon = pinImage

advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];
options.backgroundColor = [UIColor blueColor];

GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];
advancedMarker.icon = pin;

advancedMarker.map = mapView;

글리프 색상 변경

GMSPinImageGlyph.glyphColor를 사용하여 배경을 변경합니다. 마커의 색상입니다.

Swift

//...

let options = GMSPinImageOptions()

let glyph = GMSPinImageGlyph(glyphColor: .yellow)
options.glyph = glyph

let glyphColor = GMSPinImage(options: options)

advancedMarker.icon = glyphColor
advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];

options.glyph = [[GMSPinImageGlyph alloc] initWithGlyphColor:[UIColor yellowColor]];
GMSPinImage *glyphColor = [GMSPinImage pinImageWithOptions:options];

advancedMarker.icon = glyphColor;
advancedMarker.map = mapView;

글리프 텍스트 변경

마커의 글리프 텍스트를 변경하려면 GMSPinImageGlyph을 사용합니다.

Swift

//...

let options = GMSPinImageOptions()

let glyph = GMSPinImageGlyph(text: "ABC", textColor: .white)
options.glyph = glyph

let pinImage = GMSPinImage(options: options)

advancedMarker.icon = pinImage
advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];

options.glyph = [[GMSPinImageGlyph alloc] initWithText:@"ABC" textColor:[UIColor whiteColor]];
GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];

customTextMarker.icon = pin;
customTextMarker.map = mapView;

iconView 속성으로 맞춤 뷰 및 애니메이션 지원

GMSMarker과(와) 유사, GMSAdvancedMarker 도 마커인 iconView: iconView 속성은 애니메이션 가능한 모든 속성의 애니메이션을 프레임과 중앙을 제외한 UIView입니다. iconViews이 있는 마커는 지원하지 않습니다. 및 icons가 동일한 지도에 표시됩니다.

Swift

//...

let advancedMarker = GMSAdvancedMarker(position: coordinate)
advancedMarker.iconView = customView()
advancedMarker.map = mapView

func customView() -> UIView {
// return your custom UIView.
}

Objective-C

//...

GMSAdvancedMarker *advancedMarker = [GMSAdvancedMarker markerWithPosition:kCoordinate];
advancedMarker.iconView = [self customView];
advancedMarker.map = self.mapView;

-   (UIView *)customView {
  // return custom view
}

레이아웃 제약 조건

GMSAdvancedMarker는 레이아웃을 직접 지원하지 않음 iconView에 대한 제약을 받습니다. 그러나 사용자의 레이아웃 제약 조건을 설정할 수 있습니다. iconView 내의 인터페이스 요소입니다. 뷰를 만들 때 객체는 frame 또는 size를 마커에 전달해야 합니다.

Swift

//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = false

let advancedMarker = GMSAdvancedMarker(position: coordinate)
let customView = customView()

//set frame
customView.frame = CGRect(0, 0, width, height)

advancedMarker.iconView = customView

Objective-C

//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = NO;

GMSAdvancedMarker *advancedMarker = [GMSAdvancedMarker markerWithPosition:kCoordinate];

CustomView *customView = [self customView];

//set frame
customView.frame = CGRectMake(0, 0, width, height);

advancedMarker.iconView = customView;