Znaczniki

Wybierz platformę: Android iOS JavaScript

Znaczniki wskazują pojedyncze lokalizacje na mapie.

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

W odpowiedzi na zdarzenie kliknięcia znacznika możesz otworzyć okno informacyjne. Okno informacyjne wyświetla tekst lub obrazy w oknie dialogowym nad znacznikiem. Możesz użyć domyślnego okna informacyjnego, aby wyświetlić tekst, lub utworzyć własne niestandardowe okno informacyjne, aby mieć pełną kontrolę nad jego zawartością.

Dodawanie znacznika

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

Ten 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 znacznik wyskakiwał z groundAnchor po dodaniu.
  • kGMSMarkerAnimationFadeIn, aby znacznik pojawiał się stopniowo po dodaniu.

Usuwanie znacznika

Możesz usunąć znacznik z mapy, ustawiając właściwość map obiektu GMSMarker na nil. Możesz też usunąć wszystkie nakładki (w tym znaczniki) obecnie widoczne na mapie, wywołując metodę GMSMapView clear.

Swift

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

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.camera = camera;
mapView = [[GMSMapView alloc] initWithOptions:options];
// ...
[mapView clear];

Jeśli chcesz wprowadzić zmiany w znaczniku po dodaniu go do mapy, 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, żądając zabarwionej 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ć ikonę niestandardową, używając właściwości icon lub iconView znacznika. Jeśli właściwość iconView jest ustawiona, interfejs API ignoruje właściwość icon.

Za pomocą właściwości icon znacznika

Poniższy fragment kodu tworzy znacznik z ikoną niestandardową podaną jako UIImage we właściwości icon. Ikona jest wyśrodkowana na Londynie w Anglii. We fragmencie kodu założono, ż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 tego samego wystąpienia UIImage dla każdego z nich. Pomaga to zwiększyć wydajność aplikacji i zoptymalizować wykorzystanie pamięci podręcznej tekstur 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 nieużyteczny obszar.

Za pomocą właściwości iconView znacznika

Poniższy fragment kodu tworzy znacznik z ikoną niestandardową, ustawiając właściwość iconView znacznika, i animuje zmianę koloru znacznika. We fragmencie kodu założono, ż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 options = GMSMapViewOptions()
    options.camera = camera
    let mapView = GMSMapView(options: options)
    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];
  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = camera;
  _mapView = [[GMSMapView alloc] initWithOptions:options];
  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 akceptuje UIView, więc możesz mieć hierarchię standardowych elementów sterujących interfejsu, które definiują znaczniki, a każdy widok ma standardowy zestaw funkcji animacji. Możesz uwzględnić zmiany rozmiaru, koloru i poziomu alfa 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żej ilości zasobów, gdy tracksViewChanges jest ustawione na YES, co może skutkować zwiększonym zużyciem baterii. Dla porównania pojedyncza klatka UIImage jest statyczna i nie wymaga ponownego renderowania.
  • Niektóre urządzenia mogą mieć trudności z renderowaniem mapy, jeśli na ekranie jest wiele znaczników, a każdy z nich ma własny element UIView i wszystkie znaczniki śledzą zmiany jednocześnie.
  • iconView nie reaguje na interakcje użytkownika, ponieważ jest to migawka widoku.
  • Widok zachowuje się tak, jakby parametr clipsToBounds był ustawiony na YES, niezależnie od jego rzeczywistej wartości. Możesz stosować przekształcenia, które działają poza granicami, ale rysowany obiekt musi znajdować 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: w GMSMarker, musisz najpierw skopiować GMSMarker, a następnie 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 wydajności i zalety automatycznego ponownego rysowania znacznika. Na przykład:

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

Zmiana krycia 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ć przezroczystość znacznika za pomocą Core Animation, używając GMSMarkerLayer.

Spłaszczanie znacznika

Ikony znaczników są zwykle rysowane w orientacji względem ekranu urządzenia, a nie powierzchni mapy, więc obracanie, przechylanie lub powiększanie mapy nie musi zmieniać orientacji znacznika.

Możesz ustawić orientację znacznika tak, aby był on płaski względem ziemi. Płaskie znaczniki obracają się, gdy mapa jest obracana, i zmieniają perspektywę, gdy mapa jest przechylana. Podobnie jak zwykłe znaczniki, znaczniki płaskie zachowują swój rozmiar podczas powiększania i pomniejszania mapy.

Aby zmienić orientację znacznika, ustaw jego właściwość flat na 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 obrócić znacznik wokół jego punktu zakotwiczenia, ustawiając właściwość rotation. Określ obrót jako typ CLLocationDegrees, mierzony w stopniach zgodnie z ruchem wskazówek zegara od pozycji domyślnej. Gdy znacznik jest płaski na mapie, domyślną pozycją jest północ.

W przykładzie poniżej znacznik jest obracany o 90°. Ustawienie właściwości groundAnchor na 0.5,0.5 powoduje, że znacznik jest obracany wokół ś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ń dotyczących znaczników

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. Aby dowiedzieć się, jak obsługiwać konkretne zdarzenia związane ze znacznikami, zapoznaj się z artykułem Zdarzenia i gesty związane ze znacznikami. Przewodnik po zdarzeniach zawiera też listę metod w GMSMapViewDelegate. Informacje o zdarzeniach Street View znajdziesz w artykule GMSPanoramaViewDelegate.