마커

플랫폼 선택: Android iOS JavaScript

마커는 지도에서 단일 위치를 나타냅니다.

기본적으로 마커는 일반 Google 지도 모양과 느낄 수 있습니다. 마커를 맞춤설정하려면 기본 마커를 설정하거나, 마커 이미지를 맞춤 아이콘으로 대체하거나, 마커의 속성입니다.

마커에 대한 클릭 이벤트에 대한 응답으로, 마커의 정보 창에서 실행됩니다. 정보 창은 대화상자 창에 텍스트 또는 이미지를 표시합니다. 을 클릭합니다. 기본 정보 창을 사용하여 텍스트를 표시하거나 콘텐츠를 완벽하게 제어할 수 있습니다.

마커 추가

마커를 추가하려면 GMSMarker 객체를 만들고 position 및 title로 설정하고, map를 설정합니다.

다음 예는 기존 GMSMapView 객체. 마커가 10,10 좌표에 만들어지고 문자열 'Hello world' 정보 창에 표시됩니다.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;

다음과 같이 marker.appearAnimation 속성을 다음 값으로 변경합니다.

  • kGMSMarkerAnimationPop: 마커가 groundAnchor에서 튀어나오게 합니다. 표시됩니다.
  • kGMSMarkerAnimationFadeIn: 추가할 때 마커가 페이드 인됩니다.

마커 제거

다음 객체의 map 속성을 설정하여 지도에서 마커를 삭제할 수 있습니다. GMSMarker에서 nil(으)로 또는 사용자가 선택한 오버레이를 모두 삭제할 수 있습니다. GMSMapView clear를 호출하여 현재 지도에 있는 (마커 포함) 메서드를 사용하여 축소하도록 요청합니다.

Swift

let camera = GMSCameraPosition.camera(
  withLatitude: -33.8683,
  longitude: 151.2086,
  zoom: 6
)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
// ...
mapView.clear()

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
// ...
[mapView clear];

지도에 마커를 추가한 후 수정하려면 GMSMarker 객체를 유지해야 합니다. 마커를 수정할 수 있습니다. 이 객체를 변경하여 나중에 변경할 수 있습니다

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
// ...
marker.map = nil;

마커 색상 변경

색조가 들어간 markerImageWithColor:로 기본 아이콘의 버전을 표시하고 결과 이미지를 GMSMarker의 아이콘 속성에 추가합니다.

Swift

marker.icon = GMSMarker.markerImage(with: .black)

Objective-C

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];

마커 이미지 맞춤설정

기본 마커 이미지를 변경하려면 마커의 icon 또는 iconView 속성 iconView를 설정하면 API가 icon 속성을 무시합니다.

마커의 icon 속성 사용

다음 스니펫은 icon 속성의 UIImage 해당 아이콘은 영국 런던에 중심을 두고 있습니다. 이 스니펫에서는 애플리케이션에 'house.png'라는 이미지가 포함되어 있다고 가정합니다.

Swift

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: positionLondon)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:positionLondon];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

동일한 이미지로 여러 마커를 만드는 경우 동일한 인스턴스를 사용합니다. UIImage를 정의합니다. 이렇게 하면 여러 마커를 표시할 때 애플리케이션의 성능을 개선하는 데 도움이 됩니다.

이 이미지에 여러 프레임이 있을 수 있습니다. 또한 alignmentRectInsets 속성이 인정되며 마커에 그림자나 다른 요소가 있는 경우에 유용합니다. 있습니다

마커의 iconView 속성 사용

다음 스니펫은 마커의 iconView 속성을 설정하고, 마커의 색상 변경을 애니메이션으로 처리합니다. 이 스니펫은 사용자의 애플리케이션에 'house.png'라는 이미지가 포함되어 있다고 가정합니다.

Swift

import CoreLocation
import GoogleMaps

class MarkerViewController: UIViewController, GMSMapViewDelegate {
  var mapView: GMSMapView!
  var london: GMSMarker?
  var londonView: UIImageView?

  override func viewDidLoad() {
    super.viewDidLoad()

    let camera = GMSCameraPosition.camera(
      withLatitude: 51.5,
      longitude: -0.127,
      zoom: 14
    )
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    view = mapView

    mapView.delegate = self

    let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
    let markerView = UIImageView(image: house)
    markerView.tintColor = .red
    londonView = markerView

    let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
    let marker = GMSMarker(position: position)
    marker.title = "London"
    marker.iconView = markerView
    marker.tracksViewChanges = true
    marker.map = mapView
    london = marker
  }

  func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
    UIView.animate(withDuration: 5.0, animations: { () -> Void in
      self.londonView?.tintColor = .blue
    }, completion: {(finished) in
      // Stop tracking view changes to allow CPU to idle.
      self.london?.tracksViewChanges = false
    })
  }
}

Objective-C

@import CoreLocation;
@import GoogleMaps;

@interface MarkerViewController : UIViewController <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation MarkerViewController {
  GMSMarker *_london;
  UIImageView *_londonView;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;

  _mapView.delegate = self;

  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];

  CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

- (void)mapView:(GMSMapView *)mapView idleAtCameraPosition:(GMSCameraPosition *)position {
  [UIView animateWithDuration:5.0
                   animations:^{
    self->_londonView.tintColor = [UIColor blueColor];
  }
                   completion:^(BOOL finished) {
    // Stop tracking view changes to allow CPU to idle.
    self->_london.tracksViewChanges = NO;
  }];
}

@end

iconView에서 UIView를 허용하므로 표준 UI 계층 구조가 있을 수 있습니다. 마커를 정의하는 컨트롤, 각 보기에는 표준 애니메이션 집합이 있음 기능을 제공합니다 마커 크기, 색상, 알파 수준에 대한 변경 사항을 포함할 수 있으며 임의의 변환을 적용할 수 있습니다. iconView 속성은 frame 및 center를 제외한 모든 애니메이션 가능한 UIView 속성의 애니메이션을 지원합니다.

iconView를 사용할 때 다음 사항을 고려하세요.

  • tracksViewChanges가 YES로 설정된 경우 UIView가 리소스를 요구할 수 있으므로 배터리 사용량이 늘어날 수 있습니다. 이에 비해 단일 프레임 UIImage는 정적이며 다시 렌더링할 필요가 없습니다.
  • 일부 기기에서는 마커가 많은 경우 지도를 렌더링하기 어려울 수 있습니다. 각 마커에는 자체 UIView가 있고 모든 마커는 추적 중 동시에 사용할 수 있습니다.
  • iconView는 다음 항목의 스냅샷이므로 사용자 상호작용에 응답하지 않습니다. 볼 수 있습니다.
  • 뷰는 뷰와 관계없이 clipsToBounds가 YES로 설정된 것처럼 작동합니다. 실제 값입니다. 경계 바깥에서 작동하는 변환을 적용할 수 있지만 그리는 객체는 객체의 경계 내에 있어야 합니다. 전체 모니터링되고 적용됩니다 즉, 하위 뷰는 뷰 내에 포함되어야 합니다.

tracksViewChanges 속성을 언제 설정할지 결정하려면 마커를 다시 그릴 때의 이점 대비 성능을 고려해야 합니다. 자동으로 확장 및 축소할 수 있습니다 예를 들면 다음과 같습니다.

  • 변경할 사항이 여러 개인 경우 속성을 YES 후 NO로 돌아갑니다.
  • 애니메이션이 실행 중이거나 콘텐츠가 비동기적으로 로드 중인 경우 작업이 완료될 때까지 해당 속성을 YES로 설정해야 합니다.

마커 불투명도 변경

opacity 속성을 사용하여 마커의 불투명도를 제어할 수 있습니다. 해야 할 일 불투명도를 0.0~1.0 사이의 부동 소수점 수로 지정합니다. 여기서 0은 완전히 투명합니다. 1은 완전히 불투명합니다.

Swift

marker.opacity = 0.6

Objective-C

marker.opacity = 0.6;

[Core Animation]Core를 사용하여 마커 불투명도에 애니메이션을 적용할 수 있습니다. 애니메이션(GMSMarkerLayer 사용)

마커 평면화

마커 아이콘은 보통 기기의 화면을 향하지 않고 이동하지 않으므로 지도를 회전하거나 기울이거나 확대/축소해도 마커의 방향을 변경합니다.

마커의 방향을 지면에 평행하도록 설정할 수 있습니다. 평면 마커는 지도가 회전할 때 함께 회전하며 지도가 회전하면 시점이 바뀝니다. 기울어짐. 일반 마커와 마찬가지로 평면 마커는 지도가 확대/축소될 때 크기를 유지합니다.

마커의 방향을 변경하려면 마커의 flat 속성을 YES 또는 true로 설정합니다.

Swift

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView

Objective-C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon];
londonMarker.flat = YES;
londonMarker.map = mapView;

마커 회전

rotation를 설정하여 앵커 포인트를 기준으로 마커를 회전할 수 있습니다. 속성 회전을 CLLocationDegrees 유형으로 지정하며 기본 위치에서 시계 방향으로 도 회전합니다. 마커가 지도에서 평면인 경우 기본 위치는 북쪽입니다.

다음 예에서는 마커가 90° 회전합니다. groundAnchor 속성을 0.5,0.5로 설정하면 마커가 베이스가 아닌 중앙을 중심으로 회전합니다.

Swift

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView

Objective-C

CLLocationDegrees degrees = 90;
londonMarker.groundAnchor = CGPointMake(0.5, 0.5);
londonMarker.rotation = degrees;
londonMarker.map = mapView;

마커의 이벤트 처리

사용자가 버튼을 탭할 때와 같이 지도에서 발생하는 이벤트를 수신할 수 있습니다. 표시됩니다. 이벤트를 수신하려면 GMSMapViewDelegate 프로토콜 마커 이벤트 및 동작을 참고하세요. 지정할 수 있습니다. 이벤트 가이드에서도 GMSMapViewDelegate의 메서드를 지원합니다. 스트리트 뷰 이벤트에 대한 내용은 다음을 참고하세요. GMSPanoramaViewDelegate