Okna informacyjne

Wybierz platformę: Android iOS JavaScript

Okno informacyjne wyświetlane nad znacznikiem.

Okno informacyjne umożliwia wyświetlanie informacji użytkownikowi, gdy kliknie on znacznik.

Okno informacyjne jest rysowane w orientacji zgodnej z ekranem urządzenia i wyśrodkowane nad powiązanym z nim znacznikiem. Domyślne okno informacyjne zawiera tytuł pogrubiony oraz tekst fragmentu poniżej tytułu.

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 lub mają wartość nil.

W danym momencie wyświetlane jest tylko 1 okno informacyjne. Jeśli użytkownik kliknie inny znacznik, bieżące okno zostanie ukryte, a otworzy się nowe okno informacyjne. Jeśli użytkownik kliknie znacznik, który aktualnie wyświetla okno informacyjne, to okno zostanie zamknięte i ponownie otwarte.

Aby dodać dodatkowy tekst lub obrazy, utwórz niestandardowe okno informacyjne. Niestandardowe okno informacyjne daje pełną kontrolę nad wyglądem wyskakującego okienka.

Dodawanie okna informacyjnego

Poniższy fragment kodu tworzy prosty znacznik z tytułem jako tekstem okna informacyjnego.

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;

Za pomocą właściwości snippet możesz dodać dodatkowy tekst, który będzie wyświetlany pod tytułem mniejszą czcionką. Ciągi znaków dłuższe niż szerokość okna informacyjnego są automatycznie zawijane do kilku wierszy. 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;

Pokazywanie i ukrywanie okna informacyjnego

Okna informacyjne są zaprojektowane tak, aby reagować na zdarzenia dotknięcia znacznika przez użytkownika. Możesz programowo pokazywać lub ukrywać okno informacyjne, ustawiając właściwość selectedMarker elementu GMSMapView:

  • Aby wyświetlić znacznik, ustaw wartość selectedMarker na jego nazwę.
  • Aby go ukryć, ustaw wartość selectedMarker 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 były wyświetlane natychmiast po zmianie, a nie po ukryciu i ponownym wyświetleniu okna informacyjnego, ustaw wartość tracksInfoWindowChanges znacznika na YES lub true. Domyślna wartość to NO lub false.

Swift

london.tracksInfoWindowChanges = true

Objective-C

london.tracksInfoWindowChanges = YES;

Aby zdecydować, kiedy ustawić właściwość tracksInfoWindowChanges, musisz rozważyć kwestie wydajności w porównaniu z zaletami automatycznego ponownego rysowania okna informacyjnego. 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 trwa animacja lub zawartość jest ładowana asynchronicznie, należy pozostawić właściwość ustawioną na YES, dopóki działania nie zostaną zakończone.

Zapoznaj się też z uwagami dotyczącymi rozważenia kiedy używasz właściwości iconView znacznika.

Zmienianie pozycji okna informacyjnego

Okno informacyjne jest rysowane w orientacji zgodnej z ekranem urządzenia i wyśrodkowane nad powiązanym z nim znacznikiem. Możesz zmienić położenie okna informacyjnego względem znacznika, ustawiając właściwość infoWindowAnchor. Ta właściwość akceptuje wartość CGPoint zdefiniowaną jako przesunięcie (x, y), gdzie zarówno x, jak i y mieszczą się w zakresie od 0,0 do 1,0. Domyślne przesunięcie to (0,5, 0,0), czyli środek u góry. Ustawienie przesunięcia infoWindowAnchor jest przydatne do wyrównywania okna informacyjnego względem niestandardowej ikony.

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 nasłuchiwać tych zdarzeń okna informacyjnego:

Aby nasłuchiwać zdarzeń, musisz zaimplementować protokół GMSMapViewDelegate. Zapoznaj się z przewodnikiem po zdarzeniach i listą metod w GMSMapViewDelegate.

GitHub zawiera przykłady pokazujące, jak obsługiwać zdarzenia okna informacyjnego:

Niestandardowe okna informacyjne

Dostosuj zawartość okien informacyjnych, tworząc podklasę UIView która definiuje układ niestandardowego okna informacyjnego. W tej podklasie zdefiniuj widok w dowolny sposób. Możesz na przykład użyć niestandardowych UILabel instancji do wyświetlania tekstu tytułu i fragmentu oraz innych widoków, takich jak UIImageView instancji, aby dodać obrazy wyświetlane w oknie informacyjnym.

Upewnij się, że ViewController implementuje GMSIndoorDisplayDelegate protokół i definiuje odbiornik zdarzenia mapView:markerInfoWindow:. Ten odbiornik zdarzeń jest wywoływany, gdy znacznik ma zostać wybrany, i umożliwia zwrócenie instancji niestandardowej klasy UIView w celu zdefiniowania niestandardowego okna informacyjnego używanego przez znacznik.

Obrazy poniżej przedstawiają domyślne okno informacyjne, okno informacyjne z dostosowaną zawartością oraz okno informacyjne z dostosowaną ramką i tłem.

Porównanie okien informacyjnych

Przykłady kodu na GitHub dostarczone z Maps SDK na iOS obejmują przykłady niestandardowych okien informacyjnych. Na przykład zobacz definicję MarkerInfoWindowViewController.m (Objective-C) lub MarkerInfoWindowViewController.swift (Swift).

Informacje o pobieraniu i uruchamianiu tych przykładów znajdziesz w sekcji Wyświetl przykładowe fragmenty kodu.