Znaczniki

Wybierz platformę: Android iOS JavaScript

Znaczniki wskazują pojedyncze lokalizacje na mapie.

Domyślnie znaczniki mają standardową ikonę mającą wspólny wygląd i styl Map Google. Jeśli chcesz dostosować znacznik, możesz zmienić kolor domyślnego znacznika, zastąpić jego obraz ikoną niestandardową lub zmienić inne właściwości znacznika.

W odpowiedzi na kliknięcie znacznika możesz otworzyć okno informacyjne. Nad znacznikiem w oknie informacyjnym wyświetlany jest tekst lub obrazy. Możesz użyć domyślnego okna informacyjnego do wyświetlania tekstu lub utworzyć własne niestandardowe okno informacyjne, by 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 jest tworzony w miejscu współrzędnych 10,10. Po kliknięciu w oknie informacyjnym wyświetla się ciąg „Witaj świecie”.

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;
      

Aby animować dodawanie nowych znaczników do mapy, ustaw właściwość marker.appearAnimation na:

  • kGMSMarkerAnimationPop – powoduje, że po dodaniu znacznik wyskakuje z elementu groundAnchor.
  • kGMSMarkerAnimationFadeIn – powoduje, że znacznik zanika po dodaniu.

Usuwanie znacznika

Aby usunąć znacznik z mapy, ustaw właściwość map elementu GMSMarker na nil. Możesz też usunąć wszystkie nakładki (w tym znaczniki) widoczne 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ć, pamiętaj, by trzymać obiekt GMSMarker. Znacznik możesz później zmodyfikować, 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 znacznika

Aby dostosować kolor domyślnego obrazu znacznika, możesz poprosić o zabarwioną wersję ikony domyślnej za pomocą funkcji markerImageWithColor: i przekazać 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. Jeśli skonfigurowana jest zasada iconView, interfejs API ignoruje właściwość icon.

Korzystanie z właściwości znacznika icon

Poniższy fragment kodu tworzy znacznik z ikoną niestandardową określoną jako UIImage we właściwości icon. Ikona jest umieszczona w Londynie w Anglii. 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 tego samego wystąpienia UIImage dla każdego z nich. Poprawia to wydajność aplikacji, gdy wyświetla się wiele znaczników.

Ten obraz może składać się z wielu ramek. Dodatkowo respektowana jest właściwość alignmentRectInsets, co jest przydatne, gdy znacznik ma cień lub inny bezużyteczny obszar.

Korzystanie z właściwości znacznika iconView

Poniższy fragment kodu tworzy znacznik z niestandardową ikoną przez ustawienie jego właściwości iconView i animuje jego zmianę. 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
      

iconView akceptuje obiekt UIView, dlatego możesz mieć hierarchię standardowych elementów sterujących interfejsu definiujących znaczniki. Każdy widok ma standardowy zestaw funkcji animacji. Możesz uwzględniać zmiany rozmiaru znacznika, jego koloru i poziomów alfa, a także stosować dowolne przekształcenia. Właściwość iconView obsługuje animacje wszystkich właściwości animowanych UIView oprócz frame i center.

Gdy używasz iconView, weź pod uwagę te informacje:

  • UIView może żądać zasobów, gdy tracksViewChanges ma wartość YES, co może zwiększyć wykorzystanie baterii. Dla porównania pojedyncza ramka UIImage jest statyczna i nie trzeba jej ponownie renderować.
  • Niektóre urządzenia mogą mieć problemy z renderowaniem mapy, jeśli na ekranie jest wiele znaczników. Każdy z nich ma własne UIView, a wszystkie znaczniki śledzą zmiany w tym samym czasie.
  • Element iconView nie odpowiada na interakcję użytkownika, ponieważ jest to migawka widoku.
  • Widok zachowuje się tak, jakby clipsToBounds miał wartość YES, niezależnie od jej rzeczywistej wartości. Możesz stosować przekształcenia, które działają poza granicami, ale rysowany obiekt musi się w nim znajdować. Wszystkie przekształcenia i przesunięcia są monitorowane i stosowane. Krótko mówiąc: widoki podrzędne muszą zawierać się w nim.

Podejmując decyzję, kiedy ustawić właściwość tracksViewChanges, weź pod uwagę zalety związane z automatycznym ponownym rysowaniem znaczników. Na przykład:

  • Jeśli masz do wprowadzenia serię zmian, możesz zmienić właściwość na YES, a potem z powrotem na NO.
  • Gdy animacja jest aktywna lub zawartość jest wczytywana asynchronicznie, należy utrzymywać właściwość ustawioną na YES do czasu zakończenia działań.

Zmienianie przezroczystości znacznika

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

Swift

marker.opacity = 0.6
      

Objective-C

marker.opacity = 0.6;
      

Możesz animować przezroczystość znacznika za pomocą funkcji GMSMarkerLayer w ramach funkcji Core Animation.

Spłaszczanie znacznika

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

Możesz ustawić położenie znacznika tak, aby znajdowało się płasko względem Ziemi. Płaskie znaczniki obracają się, gdy mapa jest obrócona, i zmieniają perspektywę, gdy jest ona przechylona. Podobnie jak w przypadku znaczników standardowych, płaskie znaczniki zachowują swój rozmiar przy powiększeniu lub pomniejszeniu 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ół punktu zakotwiczenia, ustawiając właściwość rotation. Określ obrót jako typ CLLocationDegrees mierzony w stopniach w prawo od pozycji domyślnej. Gdy znacznik jest płasko na mapie, domyślną pozycją jest północ.

W tym przykładzie obrócisz znacznik o 90°. Ustawienie właściwości groundAnchor na 0.5,0.5 powoduje obrócenie 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ń w znacznikach

Możesz nasłuchiwać zdarzeń występujących na mapie, np. gdy użytkownik kliknie znacznik. Aby nasłuchiwać zdarzeń, musisz wdrożyć protokół GMSMapViewDelegate. Informacje o tym, jak obsługiwać określone zdarzenia związane ze znacznikami, znajdziesz w artykule o zdarzeniach związanych ze znacznikami. Przewodnik po zdarzeniach zawiera też listę metod w GMSMapViewDelegate. Informacje o wydarzeniach Street View znajdziesz tutaj: GMSPanoramaViewDelegate.