Okna informacyjne

Wybierz platformę: Android iOS JavaScript

Okno z informacjami wyświetlane nad znacznikiem.

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

Okno z informacjami jest narysowane na ekranie urządzenia i wyśrodkowane nad powiązanym znacznikiem. Domyślne okno informacji zawiera tytuł w pogrubieniu, a pod nim tekst fragmentu.

Zawartość okna informacyjnego jest definiowana przez właściwości titlesnippet znacznika. Kliknięcie znacznika nie powoduje wyświetlenia okna informacji, jeśli właściwości titlesnippet są puste lub mają wartość nil.

W danym momencie wyświetlane jest tylko jedno okno informacyjne. Jeśli użytkownik kliknie inny znacznik, bieżące okno zostanie ukryte, a otworzy się nowe okno z informacjami. Jeśli użytkownik kliknie znacznik, który wyświetla obecnie okno informacyjne, okno to zamknie się i otworzy ponownie.

Utwórz niestandardowe okno z informacjami, aby dodać dodatkowy tekst lub obrazy. Niestandardowe okno informacji daje Ci pełną kontrolę nad wyglądem wyskakującego okienka.

Dodawanie okna informacyjnego

Podany niżej fragment kodu tworzy prosty znacznik z tylko jednym tytułem 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ć dodatkowy tekst, który będzie wyświetlany pod tytułem w mniejszej czcionce. Ciągi dłuższe niż szerokość okna informacji są automatycznie zawijane na kilka 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 z informacjami

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

  • Aby wyświetlić znacznik, ustaw parametr selectedMarker na jego nazwę.
  • Aby ją ukryć, ustaw 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;
      

Konfigurowanie automatycznego odświeżania okna informacji

Jeśli chcesz, aby nowe właściwości lub zawartość okna informacji były wyświetlane natychmiast po zmianie, zamiast czekać, aż okno informacji zniknie, a potem pojawi się ponownie, ustaw wartość tracksInfoWindowChanges 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, należy porównać kwestie związane ze skutecznością z zaletami automatycznego odświeżania okna informacji. 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 uruchomiona lub treści są wczytywane asynchronicznie, należy ustawić właściwość na YES do czasu zakończenia tych działań.

Korzystając z właściwości iconView znacznika, zapoznaj się też z uwagami.

Zmienianie pozycji okna informacyjnego

Okno z informacjami jest wyświetlane na ekranie urządzenia, na środku nad powiązanym znacznikiem. Możesz zmienić położenie okna informacji względem znacznika, ustawiając właściwość infoWindowAnchor. Ta właściwość przyjmuje wartość CGPoint zdefiniowaną jako przesunięcie (x,y), gdzie x i y mieszczą się w zakresie od 0,0 do 1,0. Domyślny przesunięcie to (0,5, 0,0), czyli środek na górze. Ustawienie przesunięcia infoWindowAnchor jest przydatne do wyrównywania okna informacji 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 nasłuchiwać tych zdarzeń okna informacji:

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

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

Okna informacyjne niestandardowe

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żywać niestandardowych instancji UILabel, aby wyświetlać tytuł i tekst fragmentu kodu, oraz innych instancji, takich jak UIImageView, aby dodawać obrazy wyświetlane w oknie informacji.

Upewnij się, że ViewController implementuje protokół GMSIndoorDisplayDelegate i określa detektor 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 informacji używane przez znacznik.

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

Porównanie okna informacyjnego

Przykłady kodu na GitHub udostępnione w ramach pakietu SDK Map Google na iOS zawierają przykłady niestandardowych okien z informacjami. Przykład: definicja MarkerInfoWindowViewController.m (Objective-C) lub MarkerInfoWindowViewController.swift (Swift).

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