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 przez niego znacznika.

Okno z informacjami jest narysowane na ekranie urządzenia, na środku 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 title i snippet znacznika. Kliknięcie znacznika nie powoduje wyświetlenia okna informacji, jeśli właściwości title i snippet są puste lub mają wartość nil.

W danym momencie wyświetlane jest tylko jedno okno z informacjami. 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 się zamknie i otworzy ponownie.

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

Dodawanie okna informacyjnego

Poniższy fragment kodu tworzy prosty znacznik z tylko jednym tytułem w oknie informacji.

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;

Dzięki właściwości snippet możesz dodać dodatkowy tekst, który będzie wyświetlany pod tytułem w mniejszej czcionce. Ciągi znaków, które są dłuższe niż szerokość okna informacji, są automatycznie przenoszone 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ż lub ukryj okno z informacjami

Okna z informacjami są przeznaczone do reagowania na zdarzenia dotknięcia znacznika przez użytkownika. Okno z informacjami możesz wyświetlić lub ukryć za pomocą kodu, ustawiając właściwość selectedMarker obiektu GMSMapView:

  • Aby pokazać znacznik, ustaw wartość parametru 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;

Konfigurowanie automatycznego odświeżania okna informacji

Ustaw wartość tracksInfoWindowChanges na YES lub true, 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 się ukryje, a potem pojawi ponownie. 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ć względy 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 odtwarzana lub treści są wczytywane asynchronicznie, należy ustawić właściwość na YES do czasu zakończenia tych działań.

Podczas korzystania z właściwości iconView znacznika zapoznaj się też z uwagami.

Zmienianie pozycji okna z informacjami

Okno z informacjami jest narysowane na ekranie urządzenia, wyśrodkowane 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ść może przyjmować wartość CGPoint zdefiniowaną jako przesunięcie (x,y), gdzie x i y mają wartości z zakresu od 0,0 do 1,0. Wartość domyślna przesunięcia to (0,5, 0,0), czyli środek u góry. 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:

Niestandardowe okna informacji

Dostosuj zawartość okien informacyjnych, tworząc podklasę UIView, która określa układ niestandardowego okna informacyjnego. W tej podklasie zdefiniuj widok w dowolny sposób. Możesz na przykład używać niestandardowych wystąpień UILabel, aby wyświetlać tytuł i tekst fragmentu, 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 definiuje listenera dla 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.

Na obrazach poniżej widać 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 dostarczone z Maps SDK na iOS zawierają przykłady niestandardowych okien z informacjami. Przykładem może być definicja MarkerInfoWindowViewController.m (Objective-C) lub MarkerInfoWindowViewController.swift (Swift).

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