Znaczniki

Wybierz platformę: Android iOS JavaScript

Znaczniki wskazują pojedyncze lokalizacje na mapie.

Domyślnie markery używają standardowej ikony, która ma typowy wygląd Map Google. Jeśli chcesz dostosować znacznik, możesz zmienić kolor znacznika domyślnego, zastąpić obraz znacznika niestandardową ikoną lub zmienić inne właściwości znacznika.

W odpowiedzi na kliknięcie znacznika możesz otworzyć okno informacji. Okno informacyjne wyświetla tekst lub obrazy w oknie dialogowym nad znacznikiem. Możesz użyć domyślnego okna informacyjnego do wyświetlania tekstu lub utworzyć własne okno niestandardowe, aby w pełni kontrolować jego zawartość.

Dodawanie znacznika

Aby dodać marker, utwórz obiekt GMSMarker, który zawiera position i title, i ustaw jego map.

Poniższy przykład pokazuje, jak dodać znacznik do istniejącego obiektu GMSMapView. Znacznik jest tworzony we współrzędnych 10,10 i po kliknięciu wyświetla w oknie informacyjnym ciąg znaków „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;
      

Możesz animować dodawanie nowych znaczników do mapy, ustawiając właściwość marker.appearAnimation na:

• kGMSMarkerAnimationPop, aby po dodaniu marker wyskoczył z groundAnchor.
• kGMSMarkerAnimationFadeIn, aby po dodaniu znacznik się pojawiał.

Usuwanie znacznika

Możesz usunąć znacznik z mapy, ustawiając właściwość map elementu GMSMarker na nil. Możesz też usunąć wszystkie nakładki (w tym markery) znajdujące się obecnie na mapie, wywołując metodę 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];
      

Jeśli po dodaniu znacznika do mapy chcesz go zmodyfikować, zachowaj obiekt GMSMarker. Możesz później zmodyfikować znacznik, wprowadzając zmiany w tym obiekcie.

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;
      

Zmiana koloru znacznika

Możesz dostosować kolor domyślnego obrazu znacznika, wysyłając żądanie dotyczące przyciemnionej wersji domyślnej ikony za pomocą markerImageWithColor: i przekazując wynikowy obraz do właściwości ikony GMSMarker.

Swift

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

Objective-C

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

Dostosowywanie obrazu znacznika

Jeśli chcesz zmienić domyślny obraz znacznika, możesz ustawić niestandardową ikonę za pomocą właściwości icon lub iconView znacznika. Jeśli ustawiona jest wartość iconView, interfejs API ignoruje właściwość icon.

Korzystanie z właściwości icon znacznika

Ten fragment kodu tworzy marker z ikoną niestandardową podaną jako UIImage we właściwości icon. Ikona jest wyśrodkowana w Londynie w Anglii. Ten fragment kodu zakłada, że aplikacja zawiera obraz o nazwie „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;
      

Jeśli tworzysz kilka znaczników z tym samym obrazem, użyj tej samej instancji UIImage w przypadku każdego z nich. Pomaga to zwiększyć wydajność aplikacji podczas wyświetlania wielu znaczników.

Ten obraz może mieć wiele klatek. Dodatkowo uwzględniana jest właściwość alignmentRectInsets, co jest przydatne, jeśli znacznik ma cień lub inny obszar, którego nie można użyć.

Korzystanie z właściwości iconView znacznika

Poniższy fragment kodu tworzy znacznik z niestandardową ikoną, ustawiając właściwość iconView znacznika, i animuje zmianę koloru znacznika. Fragment kodu zakłada, że aplikacja zawiera obraz o nazwie „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
      

Ponieważ element iconView akceptuje element UIView, możesz mieć hierarchię standardowych elementów sterujących interfejsu, które definiują markery. Każdy widok ma standardowy zestaw funkcji animacji. Możesz uwzględnić zmiany rozmiaru, koloru i poziomu przezroczystości znacznika, a także zastosować dowolne przekształcenia. Właściwość iconView obsługuje animację wszystkich właściwości UIView, które można animować, z wyjątkiem frame i center.

Korzystając z iconView, pamiętaj o tych kwestiach:

• UIView może wymagać dużych zasobów, gdy tracksViewChanges jest ustawione na YES, co może zwiększyć wykorzystanie baterii. Pojedyncza klatka UIImage jest statyczna i nie wymaga ponownego renderowania.
• Niektóre urządzenia mogą mieć problemy z wyświetlaniem mapy, jeśli na ekranie jest wiele znaczników, a każdy z nich ma własny UIView i wszystkie znaczniki śledzą zmiany w tym samym czasie.
• iconView nie reaguje na interakcje użytkownika, ponieważ jest to zrzut widoku.
• Widok zachowuje się tak, jakby wartość clipsToBounds była ustawiona na YES, niezależnie od jej rzeczywistej wartości. Możesz zastosować przekształcenia, które działają poza granicami, ale rysowany obiekt musi mieścić się w granicach obiektu. Wszystkie przekształcenia i przesunięcia są monitorowane i stosowane. Krótko mówiąc: widoki podrzędne muszą być zawarte w widoku.
• Aby używać -copyWithZone: na GMSMarker, musisz najpierw skopiować GMSMarker, a potem ustawić nową instancję iconView w kopii. UIView nie obsługuje NSCopying, więc nie może skopiować iconView.

Aby zdecydować, kiedy ustawić właściwość tracksViewChanges, musisz rozważyć kwestie związane z wydajnością w porównaniu z zaletami automatycznego ponownego rysowania znacznika. Na przykład:

• Jeśli chcesz wprowadzić serię zmian, możesz zmienić usługę na YES, a potem z powrotem na NO.
• Gdy animacja jest uruchomiona lub zawartość jest ładowana asynchronicznie, właściwość powinna mieć wartość YES, dopóki działania nie zostaną zakończone.

Zmiana przezroczystości znacznika

Przezroczystość znacznika możesz kontrolować za pomocą właściwości opacity. Przezroczystość należy określić jako liczbę zmiennoprzecinkową z zakresu od 0,0 do 1,0, gdzie 0 oznacza pełną przezroczystość, a 1 – pełną nieprzezroczystość.

Swift

marker.opacity = 0.6
      

Objective-C

marker.opacity = 0.6;
      

Możesz animować krycie znacznika za pomocą Core Animation, używając GMSMarkerLayer.

Spłaszczanie znacznika

Ikony markerów są zwykle rysowane w orientacji względem ekranu urządzenia, a nie powierzchni mapy, więc obracanie, pochylanie ani powiększanie mapy niekoniecznie zmienia orientację markera.

Możesz ustawić orientację znacznika tak, aby był płaski względem Ziemi. Płaskie znaczniki obracają się wraz z mapą i zmieniają perspektywę, gdy mapa jest przechylona. Podobnie jak zwykłe znaczniki, płaskie znaczniki zachowują swój rozmiar po powiększeniu lub pomniejszeniu mapy.

Aby zmienić orientację znacznika, ustaw jego właściwość flat na wartość YES lub 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;
      

Obracanie znacznika

Możesz obracać znacznik wokół punktu zakotwiczenia, ustawiając właściwość rotation. Określ rotację jako typ CLLocationDegrees, mierzoną w stopniach zgodnie z ruchem wskazówek zegara od pozycji domyślnej. Gdy znacznik jest płasko umieszczony na mapie, domyślna pozycja to północ.

Poniższy przykład obraca znacznik o 90°. Ustawienie właściwości groundAnchorna 0.5,0.5 powoduje obracanie znacznika wokół jego środka, a nie podstawy.

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;
      

Obsługa zdarzeń na znacznikach

Możesz nasłuchiwać zdarzeń, które występują na mapie, np. gdy użytkownik kliknie znacznik. Aby nasłuchiwać zdarzeń, musisz zaimplementować protokół GMSMapViewDelegate. Więcej informacji o obsłudze konkretnych zdarzeń znacznika znajdziesz w sekcji zdarzenia znacznika i gesty. W przewodniku po zdarzeniach znajdziesz też listę metod w protokole GMSMapViewDelegate. Informacje o wydarzeniach Street View znajdziesz w artykule GMSPanoramaViewDelegate.