Okna informacyjne

Wybierz platformę: Android iOS JavaScript

Okno informacyjne wyświetlane nad znacznikiem.

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

Okno informacyjne jest rysowane w orientacji ekranu urządzenia i wyśrodkowane nad powiązanym z nim znacznikiem. Domyślne okno informacyjne zawiera pogrubiony tytuł, pod którym znajduje się tekst z fragmentu.

Zawartość okna informacyjnego jest określana przez właściwości title i snippet znacznika. 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 i otworzy się nowe okno informacyjne. Jeśli użytkownik kliknie znacznik, który obecnie wyświetla okno informacyjne, okno to zostanie zamknięte i otwarte ponownie.

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

Dodawanie okna informacyjnego

Poniższy fragment kodu tworzy prosty znacznik, który zawiera tylko tytuł 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;
      

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

Wyświetlanie i ukrywanie okna informacyjnego

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

  • Aby wyświetlić znacznik, ustaw selectedMarker na jego nazwę.
  • Ustaw selectedMarker na nil, aby ukryć tę opcję.

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 dopiero po ukryciu i ponownym wyświetleniu okna, ustaw właściwość tracksInfoWindowChanges znacznika na YES lub true. Wartość domyślna 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 animacja jest uruchomiona lub zawartość jest ładowana asynchronicznie, właściwość powinna mieć wartość YES, dopóki działania nie zostaną zakończone.

Zapoznaj się też z uwagami do rozważenia podczas używania właściwości iconView znacznika.

Zmiana pozycji okna informacyjnego

Okno informacyjne jest wyświetlane na ekranie urządzenia i wyśrodkowane nad powiązanym z nim znacznikiem. Możesz zmienić pozycję 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 góry. Ustawienie przesunięcia infoWindowAnchor jest przydatne do wyrównania okna informacyjnego względem 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 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 instancji UILabel, aby wyświetlić tytuł i tekst fragmentu, oraz innych widoków, takich jak instancje UIImageView, aby dodać obrazy wyświetlane w oknie informacyjnym.

Upewnij się, że ViewController implementuje protokół GMSIndoorDisplayDelegate i definiuje detektor zdarzenia mapView:markerInfoWindow:. Ten detektor zdarzeń jest wywoływany, gdy znacznik ma zostać wybrany. Pozwala on zwrócić instancję niestandardowej klasy UIView, aby zdefiniować niestandardowe okno informacyjne używane przez znacznik.

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

Porównanie okien informacyjnych

Przykładowe kody na GitHub dostarczane z pakietem Maps SDK na iOS zawierają przykłady niestandardowych okien informacyjnych. Zobacz na przykład definicję MarkerInfoWindowViewController.m (Objective-C) lub MarkerInfoWindowViewController.swift (Swift).

Informacje o pobieraniu i uruchamianiu tych przykładów znajdziesz w przykładowym kodzie.