Znaczniki

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Znaczniki wskazują pojedyncze lokalizacje na mapie.

Domyślnie znaczniki mają standardową ikonę, która ma wygląd podobny do Map Google. Jeśli chcesz dostosować znacznik, możesz zmienić jego kolor, zastąpić obrazek niestandardową ikoną lub zmienić inne właściwości znacznika.

W odpowiedzi na zdarzenie kliknięcia znacznika możesz otworzyć okno informacyjne. W oknie informacyjnym nad znacznikiem wyświetlany jest tekst lub obrazy. 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 elementy position i title, i ustaw jego właściwość map.

Ten przykład pokazuje, jak dodać znacznik do istniejącego obiektu GMSMapView. W przypadku tego przykładu znacznik jest tworzony w współrzędnych 10,10 i po kliknięciu wyświetla w oknie informacji ciąg znaków „Hello world”.

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView
      

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;
      

Możesz animować dodawanie nowych znaczników na mapie, ustawiając dla właściwości marker.appearAnimation wartość:

• kGMSMarkerAnimationPop, aby po dodaniu markera wyskoczył on z elementu groundAnchor.
• kGMSMarkerAnimationFadeIn, aby po dodaniu znacznik pojawiał się stopniowo.

Usuwanie znacznika

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

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

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
// ...
[mapView clear];
      

Jeśli chcesz wprowadzić zmiany w markerze po dodaniu go do mapy, pamiętaj, aby zachować obiekt GMSMarker. Możesz zmodyfikować znacznik później, wprowadzając zmiany w tym obiekcie.

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil
      

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
// ...
marker.map = nil;
      

Zmiana koloru znacznika

Możesz dostosować kolor obrazu znacznika domyślnego, prosząc o wersję z kolorem markerImageWithColor: ikony domyślnej i przekazując otrzymany obraz do właściwości ikony GMSMarker.

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

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

Dostosowywanie obrazu znacznika

Jeśli chcesz zmienić domyślny obraz znacznika, możesz ustawić niestandardową ikonę, używając właściwości icon lub iconView znacznika. Jeśli parametr iconView jest ustawiony, interfejs API ignoruje właściwość icon.

Korzystanie z właściwości icon znacznika

Ten fragment kodu tworzy znacznik z niestandardową ikoną podaną jako UIImage w właściwości icon. Ikona jest wyśrodkowana na Londynie w Anglii. Fragment kodu zakłada, że aplikacja zawiera obraz o nazwie „house.png”.

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
      

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 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.

Korzystanie z właściwości iconView znacznika

Podany niżej 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”.

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
    })
  }
}
      

@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
      

Funkcja iconView przyjmuje parametr UIView, więc możesz mieć hierarchię standardowych elementów sterujących interfejsem użytkownika definiujących znaczniki, przy czym każdy widok ma standardowy zestaw możliwości animacji. Możesz uwzględnić zmiany rozmiaru, koloru i poziomów 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 właściwości frame i center.

Podczas korzystania z iconView należy wziąć pod uwagę te kwestie:

• Gdy tracksViewChanges jest ustawiona na YES, UIView może wymagać wielu zasobów, co może spowodować zwiększone zużycie baterii. Natomiast pojedynczy kadr UIImage jest statyczny i nie trzeba go ponownie renderować.
• Na niektórych urządzeniach może wystąpić problem z renderowaniem mapy, jeśli na ekranie jest dużo znaczników, a każdy z nich ma swoją własną wartość UIView i wszystkie znaczniki śledzą zmiany w tym samym czasie.
• iconView nie reaguje na interakcje użytkownika, ponieważ jest to migawka widoku.
• Widok działa tak, jakby parametr clipsToBounds był ustawiony na wartość YES, niezależnie od jego rzeczywistej wartości. Możesz stosować przekształcenia, które działają poza granicami obiektu, ale rysowany obiekt musi znajdować się w ramach obiektu. Wszystkie przekształcenia są monitorowane i stosowane. Krótko mówiąc: widoki podrzędne muszą być zawarte w widoku.
• Aby użyć funkcji -copyWithZone: w komponencie GMSMarker, musisz najpierw skopiować komponent GMSMarker, a potem ustawić w jego kopii nową instancję komponentu iconView. UIView nie obsługuje NSCopying, więc nie może skopiować iconView.

Aby zdecydować, kiedy ustawić właściwość tracksViewChanges, należy porównać względy dotyczące wydajności z zaletami automatycznego odświeżania 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 odtwarzana lub treści są wczytywane asynchronicznie, należy ustawić właściwość na YES do czasu zakończenia tych działań.

Zmiana przezroczystości znacznika

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

marker.opacity = 0.6
      

marker.opacity = 0.6;
      

Możesz animować przezroczystość znacznika za pomocą podstawowej animacji, używając GMSMarkerLayer.

Spłaszczenie znacznika

Ikony znaczników są zwykle rysowane w orientacji ekranu urządzenia, a nie mapy, więc obracanie, przechylanie lub powiększanie mapy niekoniecznie zmienia orientację znacznika.

Możesz ustawić orientację znacznika tak, aby był płaski na powierzchni Ziemi. znaczniki płaskie obracają się, gdy obraca się mapę, a ich perspektywa zmienia się, gdy mapę przechyla się; Podobnie jak zwykłe znaczniki, płaskie znaczniki zachowują swój rozmiar podczas powiększania lub pomniejszania mapy.

Aby zmienić orientację znacznika, ustaw właściwość flat na YES lub true.

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView
      

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, zmierzoną 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 tym przykładzie znacznik obraca się o 90°. Ustawienie właściwości groundAnchor na 0.5,0.5 powoduje, że znacznik obraca się wokół swojego środka, a nie podstawy.

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

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