Znaczniki

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Wybierz platformę: Android iOS JavaScript

Znaczniki wskazują pojedyncze lokalizacje na mapie.

Domyślnie znaczniki korzystają ze standardowej ikony, która ma wspólny wygląd i sposób działania. Jeśli chcesz dostosować znacznik, możesz zmienić kolor domyślnego znacznika, zastąpić go znacznikiem własną ikonę 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 wyskakującym okienku nad znacznikiem. Możesz użyć domyślnego okna informacyjnego, aby wyświetlać tekst, 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 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 się w oknie informacyjnym ciąg „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 zniknął po dodaniu.

Usuwanie znacznika

Znacznik możesz usunąć z mapy, ustawiając właściwość map elementu GMSMarker na nil. Możesz też usunąć wszystkie nakładki (łącznie ze znacznikami) 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ć zmiany, pamiętaj o zachowaniu obiektu GMSMarker. Znacznik można później zmienić, modyfikując ten obiekt.

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 zmienić kolor domyślnego obrazu znacznika, żądając zabarwienie wersji domyślnej ikony za pomocą właściwości 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 zasada jest ustawiona na iconView, interfejs API ignoruje właściwość icon. Aktualne wartości icon nie są rozpoznawane, o ile ustawiono wartość iconView.

Korzystanie z właściwości „icon” znacznika

Ten fragment kodu tworzy znacznik z ikoną niestandardową przedstawioną jako UIImage we właściwości icon. Ikona znajduje się w centrum Londynu. Fragment 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 znacznika. Poprawia to wydajność aplikacji wyświetlającej wiele znaczników.

Ten obraz może mieć wiele klatek. Uwzględniana jest też właściwość alignmentRectInsets, co jest przydatne, jeśli znacznik zawiera cień lub inny nieodpowiedni region.

Korzystanie z właściwości „iconView” znacznika

Ten fragment kodu tworzy znacznik z ikoną niestandardową, 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ż iconView akceptuje zasadę UIView, możesz mieć hierarchię standardowych elementów sterujących definiujących znaczniki, a każdy widok ma standardowy zestaw funkcji animacji. Możesz uwzględniać zmiany rozmiaru, koloru i poziomu znacznika oraz zastosować przekształcenia dowolne. Właściwość iconView obsługuje animacje wszystkich animowanych właściwości UIView z wyjątkiem frame i center.

Podczas korzystania z iconView pamiętaj o tych kwestiach:

  • UIView może wymagać użycia zasobów, gdy zasada tracksViewChanges ma wartość YES. Może to spowodować większe wykorzystanie baterii. Natomiast 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, a każdy z nich ma własny element UIView, a wszystkie znaczniki jednocześnie śledzą zmiany.
  • iconView nie odpowiada na interakcje użytkowników, ponieważ jest to podsumowanie widoku danych.
  • Widok działa tak, jakby clipsToBounds miał wartość YES, niezależnie od wartości rzeczywistej. Możesz stosować przekształcenia, które wykraczają poza granice obiektu, ale rysowany obiekt musi mieścić się w obrębie obiektu. Wszystkie przekształcenia/przesunięcia są monitorowane i stosowane. Krótko mówiąc: widoki podrzędne muszą być zawarte w widoku.

Aby zdecydować, kiedy należy ustawić właściwość tracksViewChanges, porównaj możliwości związane z wydajnością automatycznego eliminowania znacznika. Przykład:

  • Jeśli chcesz wprowadzić serię zmian, możesz zmienić właściwość na YES, a następnie wrócić do NO.
  • Gdy animacja jest uruchamiana lub treści są wczytywane asynchronicznie, należy ustawić wartość YES na czas ukończenia działań.

Zmiana przezroczystości znacznika

Przezroczystość znacznika możesz kontrolować za pomocą właściwości opacity. Musisz przezroczystość ustawić jako liczbę zmiennoprzecinkową 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;
      

Przezroczystość znacznika możesz animować za pomocą animacji podstawowej za pomocą właściwości GMSMarkerLayer.

Spłaszczanie znacznika

Ikony znacznika są zazwyczaj rysowane razem z ekranem urządzenia, a nie powierzchnią mapy, więc ich obrót, pochylenie lub powiększenie mapy nie musi zmieniać orientacji znacznika.

Możesz ustawić znacznik płasko na ziemi. Znaczniki płaskie są obracane, gdy mapa jest obrócona, a widok zmienia się po pochyleniu mapy. Tak jak w przypadku zwykłych znaczników, płaskie znaczniki zachowują rozmiar po powiększeniu lub pomniejszeniu mapy.

Aby zmienić orientację znacznika, ustaw 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

Znacznik możesz obracać wokół punktu zakotwiczenia, ustawiając właściwość rotation. Obrót podaj jako typ CLLocationDegrees mierzony w stopniach w prawo od pozycji domyślnej. Kiedy znacznik jest płaski na mapie, domyślną pozycją jest północ.

W poniższym przykładzie znacznik jest obracany o 90°. Ustawienie właściwości groundAnchor na 0.5,0.5 powoduje, że znacznik jest obracany wokół jego środka, a nie jako jego 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. gdy użytkownik dotknie znacznika. Aby nasłuchiwać zdarzeń, musisz wdrożyć protokół GMSMapViewDelegate. Więcej informacji znajdziesz w przewodniku po zdarzeniach i liście metod w GMSMapViewDelegate. Wydarzenia Street View znajdziesz w GMSPanoramaViewDelegate.