고급 마커는 두 가지 클래스를 사용하여 마커를 정의합니다.
GMSAdvancedMarker
클래스가 기본 마커를 제공합니다.
기능을 포함하며, GMSPinImageOptions
에는 옵션이 포함되어 있습니다.
추가로 맞춤설정할 수 있습니다 이 페이지에서는 Google Maps JavaScript API v2에서 마커를 맞춤설정하는 방법을
방법은 다음과 같습니다.
- 배경 색상 변경
- 테두리 색상 변경
- 글리프 색상 변경
- 글리프 텍스트 변경
- iconView 속성으로 맞춤 뷰 및 애니메이션 지원
![고급 마커의 요소](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/documentation/ios-sdk/images/marker_parts.png?authuser=0000&hl=ko)
배경 색상 변경
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;