Okna informacyjne

Wybierz platformę: Android iOS JavaScript

Okno informacyjne wyświetlane nad znacznikiem.

Okno informacyjne umożliwia wyświetlanie informacji użytkownikowi po kliknięciu znacznika.

Okno informacyjne jest wyświetlane względem ekranu urządzenia i wyśrodkowane nad powiązanym znacznikiem. Domyślne okno informacyjne zawiera tytuł pogrubiony, a fragment kodu znajduje się pod nim.

Zawartość okna informacyjnego jest określana przez właściwości znacznika title i snippet. Kliknięcie znacznika nie powoduje wyświetlenia okna informacyjnego, jeśli właściwości title i snippet są puste albo nil.

Wyświetlane jest tylko jedno okno informacyjne naraz. Jeśli użytkownik kliknie inny znacznik, bieżące okno zostanie ukryte i otworzy się nowe okno informacyjne. Jeśli użytkownik kliknie znacznik, który obecnie wyświetla okno informacyjne, okno informacyjne zostanie zamknięte i ponownie otwarte.

Utwórz niestandardowe okno informacyjne, aby dodać do niego dodatkowy tekst lub obrazy. Niestandardowe okno informacyjne zapewnia pełną kontrolę nad wyglądem wyskakującego okienka.

Dodaj okno informacyjne

Ten fragment kodu tworzy prosty znacznik z tytułem tekstu w oknie informacyjnym.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView;
      

We właściwości snippet możesz dodać dodatkowy tekst, który będzie wyświetlany pod tytułem mniejszym tekstem. Ciągi znaków dłuższe niż szerokość okna informacyjnego są automatycznie zawijane w kilku wierszach. Bardzo długie wiadomości mogą zostać skrócone.

Swift

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
      

Objective-C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
      

Pokaż/ukryj okno informacyjne

Okna informacyjne są reagowane na zdarzenia dotyku użytkownika w znaczniku. Możesz wyświetlić lub ukryć okno informacyjne, ustawiając właściwość selectedMarker elementu GMSMapView:

  • W polu selectedMarker wpisz nazwę znacznika, aby go wyświetlić.
  • Aby ukryć element selectedMarker, ustaw jego wartość na nil.

Swift

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
// Show marker
mapView.selectedMarker = london
// Hide marker
mapView.selectedMarker = nil
      

Objective-C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
// Show marker
mapView.selectedMarker = london;
// Hide marker
mapView.selectedMarker = nil;
      

Ustawianie automatycznego odświeżania okna informacyjnego

Jeśli chcesz, aby nowe właściwości lub zawartość okna informacyjnego wyświetlały się natychmiast po zmianie, nie musisz czekać, aż je ukryje, a potem ponownie je wyświetlić, ustaw w znaczniku wartość tracksInfoWindowChanges na YES lub true. Wartość domyślna to NO lub false.

Swift

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

Podczas podejmowania decyzji o tym, kiedy ustawić właściwość tracksInfoWindowChanges, musisz wziąć pod uwagę kwestie związane z wydajnością i porównać korzyści płynące z automatycznego odświeżania okna informacyjnego. Na przykład:

  • Jeśli chcesz wprowadzić serię zmian, możesz zmienić usługę na YES, a następnie na NO.
  • Gdy animacja jest uruchomiona lub treść jest wczytywana asynchronicznie, do czasu zakończenia wykonywania czynności pozostaw właściwość YES.

Jeśli korzystasz z właściwości iconView znacznika, zapoznaj się też z uwagami do rozważenia.

Zmiana położenia okna informacyjnego

Okno informacyjne jest wyświetlane wokół ekranu urządzenia i wyśrodkowane nad powiązanym znacznikiem. Położenie okna informacyjnego względem znacznika możesz zmienić, ustawiając właściwość infoWindowAnchor. Ta właściwość może przyjmować wartość CGPoint zdefiniowaną jako przesunięcie (x,y), gdzie X i y mają wartość od 0,0 do 1,0. Domyślne przesunięcie to (0,5, 0,0), czyli od środka. Ustawienie przesunięcia infoWindowAnchor przydaje się do dopasowania okna informacyjnego do ikony niestandardowej.

Swift

london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView
      

Objective-C

london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

Obsługa zdarzeń w oknach informacyjnych

Możesz słuchać tych zdarzeń w oknie informacyjnym:

Aby nasłuchiwać zdarzeń, musisz wdrożyć protokół GMSMapViewDelegate. Zobacz przewodnik po zdarzeniach i listę metod w GMSMapViewDelegate.

GitHub zawiera przykłady, które pokazują, jak obsługiwać zdarzenia w oknie informacyjnym:

Niestandardowe okna informacyjne

Dostosuj zawartość okien informacyjnych, tworząc podklasę klasy UIView, która określa układ niestandardowego okna informacyjnego. W ramach tych podkategorii możesz dostosować widok do swoich potrzeb. Możesz na przykład użyć instancji niestandardowych UILabel do wyświetlania tytułu i fragmentu tekstu oraz innych widoków, takich jak wystąpienia UIImageView, aby dodawać obrazy wyświetlane w oknie informacyjnym.

Upewnij się, że ViewController implementuje protokół GMSIndoorDisplayDelegate i określa odbiornik zdarzenia mapView:markerInfoWindow:. Ten detektor zdarzeń jest wywoływany, gdy znacznik zostanie wkrótce wybrany. Umożliwia on zwrócenie wystąpienia niestandardowej klasy UIView w celu zdefiniowania niestandardowego okna informacyjnego używanego przez znacznik.

Na poniższych obrazach widać domyślne okno informacyjne, okno z dostosowaną treścią oraz okno z dostosowaną ramką i tłem.

Porównanie okna informacyjnego

Przykładowe fragmenty kodu w GitHub dołączone do pakietu Maps SDK na iOS obejmują przykłady niestandardowych okien informacyjnych. Na przykład zobacz definicję MarkerInfoWindowViewController.m (Target-C) lub MarkerInfoWindowViewController.swift (Swift).

Informacje o pobieraniu i uruchamianiu przykładów znajdziesz w sekcji z przykładami kodu.