Okna informacyjne

Wybierz platformę: Android iOS JavaScript

Okno informacyjne wyświetlane nad znacznikiem.

Okno informacyjne pozwala wyświetlić informacje użytkownikowi po kliknięciu przez użytkownika znacznik.

Okno informacyjne jest wyśrodkowane na ekranie urządzenia jego znacznikami. Domyślne okno informacyjne zawiera tytuł pogrubiony, tekst rozszerzenia informacji pod tytułem.

Zawartość okna informacyjnego jest definiowana przez zasady title oraz snippet właściwości znacznika. Kliknięcie znacznika nie powoduje wyświetlenia okno informacyjne, jeśli właściwości title i snippet są puste lub nil.

Wyświetlane jest tylko jedno okno informacyjne naraz. Jeśli użytkownik kliknie kolejny znacznik, bieżące okno zostanie ukryte i zostanie otwarte nowe okno informacyjne. Jeśli użytkownik kliknie znacznik, który w danej chwili wyświetla okno informacyjne, okno informacyjne zamyka się i otwiera ponownie.

Utwórz niestandardowe okno informacyjne, w którym możesz umieścić dodatkowy tekst lub obrazy. Niestandardowy Zapewnia ono pełną kontrolę nad wyglądem wyskakującego okienka.

Dodaj okno informacyjne

Ten fragment kodu tworzy prosty znacznik z tylko 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;
      

Przy użyciu właściwości snippet możesz dodawać dodatkowy tekst, który będzie się pod tytułem mniejszą czcionką. Ciągi znaków, które są dłuższe niż szerokość elementu okno informacyjne jest automatycznie zawijane przez 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 informacyjne

Okna informacyjne są zaprojektowane w taki sposób, aby reagować na zdarzenia dotknięcia użytkownika dotyczące znacznika. Okno informacyjne możesz wyświetlić lub ukryć automatycznie, ustawiając selectedMarker właściwość GMSMapView:

  • Aby pokazać znacznik, ustaw selectedMarker na nazwę znacznika.
  • Aby ukryć ten element, 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;
      

Ustawianie automatycznego odświeżania okna informacyjnego

Ustaw tracksInfoWindowChanges na znacznik YES lub true, jeśli interesują Cię nowe nieruchomości lub treść tych informacji natychmiastowe wyświetlanie po zmianie, bez konieczności czekania okno informacyjne, które chcesz ukryć i pokazać ponownie. Wartość domyślna to NO lub false.

Swift

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

Aby zdecydować, kiedy ustawić tracksInfoWindowChanges, należy brać pod uwagę wydajność urządzenia z korzyściami gdy okno informacyjne jest automatycznie rysowane ponownie. Na przykład:

  • Jeśli chcesz wprowadzić serię zmian, możesz zmienić właściwość na YES a potem wróć do: NO.
  • Podczas odtwarzania animacji lub asynchronicznego wczytywania treści Do czasu zakończenia działań pozostaw właściwość ustawioną na YES.

Zapoznaj się też z uwagami, gdy za pomocą właściwości iconView znacznika.

Zmiana położenia okna informacyjnego

Okno informacyjne jest wyśrodkowane na ekranie urządzenia nad powiązanym znacznikiem. Możesz zmienić położenie okna informacyjnego względem znacznika za pomocą właściwości infoWindowAnchor. Ten właściwość akceptuje CGPoint, zdefiniowane jako przesunięcie (x,y), gdzie x i y mieści się w zakresie od 0,0 do 1,0. Domyślne przesunięcie to (0,5, 0,0), czyli środek do góry. Ustawienie przesunięcia infoWindowAnchor jest przydatne do wyrównania informacji 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ń w oknie informacyjnym:

Aby nasłuchiwać zdarzeń, musisz zaimplementować funkcję Protokół GMSMapViewDelegate. Zobacz przewodnik po zdarzeniach i listę metod w witrynie GMSMapViewDelegate.

GitHub zawiera przykłady, które pokazują, jak obsługiwać zdarzenia w oknie informacyjnym:

Niestandardowe okna informacyjne

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

Upewnij się, że w Twojej witrynie ViewController jest zaimplementowane GMSIndoorDisplayDelegate i definiuje detektor mapView:markerInfoWindow: . Ten detektor zdarzeń jest wywoływany, gdy znacznik ma stać się i pozwala zwrócić instancję niestandardowej klasy UIView do zdefiniować niestandardowe okno informacyjne używane przez znacznik.

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

Porównanie okna informacyjnego

Przykładowy kod na stronie GitHub dostępne w pakiecie Maps SDK na iOS dołącz przykłady niestandardowych okien informacyjnych. Zobacz na przykład definicję MarkerInfoWindowViewController.m (Objective-C) lub MarkerInfoWindowViewController.swift (Swift).

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