Znaczniki

Wybierz platformę: Android iOS JavaScript

Znaczniki wskazują pojedyncze lokalizacje na mapie.

Domyślnie znaczniki mają standardową ikonę przypominającą wygląd i sposób działania Map Google. Jeśli chcesz dostosować znacznik, możesz zmienić jego kolor, zastąpić obraz znacznika własną ikoną lub zmienić jego inne właściwości.

W odpowiedzi na zdarzenie kliknięcia przypisane do 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 do wyświetlania tekstu lub utworzyć własne okno informacyjne, aby w pełni kontrolować jego zawartość.

Dodawanie znacznika

Aby dodać znacznik, utwórz obiekt GMSMarker zawierający position oraz title i ustaw jego map.

Poniższy przykład pokazuje, jak dodać znacznik do istniejącego obiektu GMSMapView. Znacznik zostanie utworzony w miejscu współrzędnych 10,10, a po kliknięciu ciąg znaków „Hello world” zostanie wyświetlony w oknie informacyjnym.

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 znacznik wyskoczył z elementu groundAnchor.
  • kGMSMarkerAnimationFadeIn, aby znacznik wygasł po dodaniu.

Usuwanie znacznika

Możesz usunąć znacznik z mapy, ustawiając właściwość map właściwości GMSMarker na nil. Możesz też usunąć wszystkie nakładki (w tym znaczniki) 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 wprowadzić w nim zmiany, upewnij się, że trzymasz go w miejscu znacznika GMSMarker. Znacznik możesz później zmienić, 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;

Zmienianie koloru pisaka

Możesz dostosować kolor domyślnego obrazu znacznika, wysyłając żądanie o zabarwioną wersję ikony domyślnej za pomocą parametru 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ą za pomocą właściwości icon lub iconView znacznika. Jeśli jest ustawiona wartość iconView, interfejs API ignoruje właściwość icon.

Używanie właściwości icon znacznika

Ten fragment kodu tworzy znacznik z ikoną niestandardową dostarczoną jako UIImage we właściwości icon. Zlokalizowana jest w Londynie (Wielka Brytania). Fragment ten zakłada, że Twoja 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, w przypadku każdego z nich użyj tego samego wystąpienia UIImage. Poprawia to wydajność aplikacji przy wyświetlaniu wielu znaczników.

Ten obraz może mieć wiele klatek. Dodatkowo uwzględniana jest właściwość alignmentRectInsets, co przydaje się, gdy znacznik zawiera cień lub inny obszar bezużyteczny.

Używanie właściwości iconView znacznika

Ten fragment kodu tworzy znacznik z ikoną niestandardową przez ustawienie właściwości iconView znacznika, a także animuje zmianę jego koloru. Fragment ten 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

iconView akceptuje znacznik UIView, dlatego możesz utworzyć hierarchię standardowych elementów sterujących interfejsu definiujących znaczniki, a każdy widok ma standardowy zestaw funkcji animacji. Możesz zmieniać rozmiar znacznika, kolor i poziomy alfa, a także stosować dowolne przekształcenia. Właściwość iconView obsługuje animację wszystkich właściwości animacji UIView oprócz frame i center.

Podczas korzystania z iconView pamiętaj o tych uwagach:

  • Gdy zasada tracksViewChanges ma wartość YES, UIView może obciążać zasoby, co może skutkować zwiększonym wykorzystaniem baterii. Dla porównania pojedyncza klatka UIImage jest statyczna i nie trzeba jej ponownie renderować.
  • Niektóre urządzenia mogą mieć trudności z renderowaniem mapy, jeśli na ekranie jest ich wiele, a każdy znacznik ma własne UIView, a wszystkie znaczniki śledzą zmiany w tym samym czasie.
  • Element iconView nie reaguje na interakcję użytkownika, ponieważ jest tylko migawką widoku.
  • Widok działa tak, jakby clipsToBounds miał wartość YES, niezależnie od jego rzeczywistej wartości. Możesz zastosować przekształcenia, które działają poza granicami, ale rysowany obiekt musi się znajdować w jego granicach. Wszystkie przekształcenia/przesunięcia są monitorowane i stosowane. Krótko mówiąc: widoki podrzędne muszą być obejmowane w obrębie widoku.

Aby zdecydować, kiedy ustawić właściwość tracksViewChanges, rozważ porównanie wydajności z zaletami automatycznego ponownego rysowania znacznika. Na przykład:

  • Jeśli musisz wprowadzić serię zmian, możesz zmienić właściwość na YES, a potem z powrotem na NO.
  • Gdy animacja jest uruchomiona lub treści są wczytywane asynchronicznie, pozostaw właściwość ustawioną na YES, dopóki działania nie zostaną ukończone.

Zmienianie przezroczystości znacznika

Przezroczystość znacznika możesz kontrolować za pomocą jego 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ą animacji podstawowej [Core Animation]za pomocą GMSMarkerLayer.

Spłaszczanie znacznika

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

Możesz ustawić płaską orientację znacznika względem ziemi. Płaskie znaczniki obracają się, gdy mapa jest obrócona, i zmieniają perspektywę, gdy jest przechylona. Tak jak w przypadku standardowych znaczników, płaskie znaczniki zachowują swój rozmiar po powiększeniu lub pomniejszeniu mapy.

Aby zmienić orientację znacznika, ustaw właściwość flat znacznika 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ół punktu zakotwiczenia, ustawiając właściwość rotation. Określ obrót jako typ CLLocationDegrees mierzony w stopniach w prawo od pozycji domyślnej. Jeśli znacznik jest na płaskiej mapie, domyślnie jest ustawiona północ.

Ten przykład obraca znacznik o 90°. Ustawienie właściwości groundAnchor na 0.5,0.5 powoduje obrót 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ń występujących na mapie, np. kliknięcia znacznika przez użytkownika. Aby nasłuchiwać zdarzeń, musisz wdrożyć protokół GMSMapViewDelegate. Aby dowiedzieć się, jak obsługiwać określone zdarzenia znaczników, przeczytaj sekcję o zdarzeniach znaczników i gestach. Przewodnik po zdarzeniach zawiera też listę metod w obiekcie GMSMapViewDelegate. Informacje o wydarzeniach Street View znajdziesz tutaj: GMSPanoramaViewDelegate.