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 zorientowane na ekran urządzenia i wyśrodkowane nad powiązanym znacznikiem. Domyślne okno informacyjne zawiera pogrubiony tytuł, a pod tytułem znajduje się krótki opis.

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

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

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

Dodaj okno informacyjne

Poniższy fragment kodu tworzy prosty znacznik z samym tytułem tekstu 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 widoczny pod tytułem, mniejszą czcionką. Ciągi dłuższe niż szerokość okna informacyjnego są automatycznie zawijane względem kilku wierszy. Bardzo długie wiadomości mogą zostać obcięte.

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łużą do reagowania na zdarzenia dotknięcia znacznika przez użytkownika. Okno informacyjne możesz wyświetlać lub ukrywać automatycznie, ustawiając właściwość selectedMarker na GMSMapView:

  • Ustaw selectedMarker na nazwę znacznika, aby go wyświetlić.
  • Ustaw opcję selectedMarker na nil, aby ją ukryć.

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

Ustaw tracksInfoWindowChanges na znaczniku na YES lub true, jeśli chcesz, aby nowe właściwości lub zawartość okna informacyjnego były wyświetlane natychmiast po zmianie – bez konieczności czekania, aż okno informacyjne zostanie ukryte i pojawi się ponownie. Wartością domyślną jest NO lub false.

Swift

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

Podejmując decyzję o tym, kiedy ustawić właściwość tracksInfoWindowChanges, należy wziąć pod uwagę zalety związane z wydajnością i zaletami automatycznego odświeżenia 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 animacja jest aktywna lub zawartość jest wczytywana asynchronicznie, należy zachować właściwość YES do czasu zakończenia działania.

Jeśli używasz właściwości iconView znacznika, pamiętaj o uwagach do rozważenia.

Zmienianie położenia okna informacyjnego

Okno informacyjne jest wyświetlane zorientowane na ekran 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ść akceptuje element CGPoint, który jest zdefiniowany 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 od środka górnej krawędzi. Ustawienie przesunięcia infoWindowAnchor przydaje się do wyrównywania okna informacyjnego z ikoną niestandardową.

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ń z okna informacyjnego:

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

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

Niestandardowe okna informacyjne

Dostosuj zawartość okien informacyjnych, tworząc podklasę UIView, która określa układ niestandardowego okna informacyjnego. W tej podklasie możesz dowolnie definiować widok. Na przykład niestandardowych wystąpień UILabel możesz używać do wyświetlania tekstu tytułu i krótkiego opisu oraz innych widoków, takich jak wystąpienia UIImageView, w celu dodawania obrazów wyświetlanych w oknie informacyjnym.

Sprawdź, czy ViewController implementuje protokół GMSIndoorDisplayDelegate i określa odbiornik zdarzenia mapView:markerInfoWindow:. Ten detektor zdarzeń jest wywoływany, gdy znacznik ma zostać wybrany. Umożliwia on zwrócenie wystąpienia niestandardowej klasy UIView, aby zdefiniować niestandardowe okno informacyjne używane przez znacznik.

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

Porównanie okna informacyjnego

Przykładowy kod w GitHub udostępniony w pakiecie Maps SDK na iOS zawiera przykłady niestandardowych okien informacyjnych. Na przykład zapoznaj się z definicją MarkerInfoWindowViewController.m (Objective-C) lub MarkerInfoWindowViewController.swift (Swift).

Informacje o pobieraniu i uruchamianiu tych przykładów znajdziesz w przykładach kodu.