Okna informacyjne

Wybierz platformę: Android iOS JavaScript

Okno informacyjne wyświetla tekst lub obrazy w wyskakującym okienku nad mapą. okna informacyjne są zawsze przymocowane do oznacznika. Domyślnie wyświetlają się one po kliknięciu znacznika.

Przykładowe fragmenty kodu

Repozytorium ApiDemos na GitHubie zawiera przykład, który demonstruje wszystkie funkcje okna z informacjami:

Wprowadzenie

Okno informacyjne umożliwia wyświetlanie informacji użytkownikowi, gdy kliknie on znacznik. W danym momencie wyświetlane jest tylko jedno okno informacyjne. Jeśli użytkownik kliknie znacznik, bieżące okno informacji zostanie zamknięte i otworzy się nowe okno. Pamiętaj, że jeśli użytkownik kliknie znacznik, który wyświetla obecnie okno informacyjne, okno to zamknie się i otworzy ponownie.

Okno z informacjami jest narysowane na ekranie urządzenia, na środku nad powiązanym znacznikiem. Domyślne okno informacji zawiera tytuł w pogrubieniu oraz (opcjonalnie) tekst fragmentu poniżej tytułu.

Dodawanie okna informacyjnego

Najprostszym sposobem dodania okna informacyjnego jest ustawienie metod title()snippet() odpowiedniego znacznika. Po ustawieniu tych właściwości po kliknięciu znacznika pojawi się okno z informacjami.

Kotlin

val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400")
)

      

Java

final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400"));

      

Pokaż/ukryj okno informacyjne

Okna informacyjne są projektowane tak, aby reagować na zdarzenia dotykowe użytkownika. Jeśli wolisz, możesz wyświetlić okno informacyjne programowo, wywołując funkcję showInfoWindow() na znaczniku docelowym. Aby ukryć okno z informacjami, wywołaj hideInfoWindow().

Kotlin

val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
)
melbourne?.showInfoWindow()

      

Java

final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne"));
melbourne.showInfoWindow();

      

Możesz też tworzyć okna informacyjne dla poszczególnych punktów skupionych. Przeczytaj przewodnik dodawania okna informacyjnego dla poszczególnych grupowanych znaczników.

Niestandardowe okna informacji

Możesz też dostosować zawartość i wygląd okien z informacjami. Aby to zrobić, musisz utworzyć konkretne wdrożenie interfejsu InfoWindowAdapter, a potem wywołać funkcję GoogleMap.setInfoWindowAdapter() w ramach tego wdrożenia. Interfejs zawiera 2 metody implementacji: getInfoWindow(Marker)getInfoContents(Marker). API najpierw wywoła funkcję getInfoWindow(Marker), a jeśli zwróci ona wartość null, wywoła funkcję getInfoContents(Marker). Jeśli zwróci ono wartość null, zostanie użyte domyślne okno z informacjami.

Pierwszy z nich (getInfoWindow()) umożliwia wyświetlenie widoku, który będzie używany w całym oknie informacji. Druga z nich (getInfoContents()) pozwala dostosować tylko zawartość okna, zachowując domyślną ramkę i tło okna informacyjnego.

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

Zdarzenia okna informacyjnego

Plik MarkerDemoActivity (próbka) zawiera przykładowy kod do rejestrowania i obsługiwania zdarzeń okna z informacjami.

Możesz użyć tagu OnInfoWindowClickListener, aby nasłuchiwać zdarzeń kliknięcia w oknie z informacjami. Aby ustawić tego słuchacza na mapie, wywołaj funkcję GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Gdy użytkownik kliknie okno informacyjne, zostanie wywołana funkcja onInfoWindowClick(Marker), a okno informacyjne zostanie wyróżnione domyślnym kolorem wyróżnienia (szary).

Kotlin

internal inner class InfoWindowActivity : AppCompatActivity(),
    OnInfoWindowClickListener,
    OnMapReadyCallback {
    override fun onMapReady(googleMap: GoogleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this)
    }

    override fun onInfoWindowClick(marker: Marker) {
        Toast.makeText(
            this, "Info window clicked",
            Toast.LENGTH_SHORT
        ).show()
    }
}

      

Java

class InfoWindowActivity extends AppCompatActivity implements
    GoogleMap.OnInfoWindowClickListener,
    OnMapReadyCallback {

    @Override
    public void onMapReady(GoogleMap googleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this);
    }

    @Override
    public void onInfoWindowClick(Marker marker) {
        Toast.makeText(this, "Info window clicked",
            Toast.LENGTH_SHORT).show();
    }
}

      

Podobnie możesz wykrywać zdarzenia długiego kliknięcia za pomocą parametru OnInfoWindowLongClickListener, który możesz ustawić, wywołując funkcję GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Ten detektor działa podobnie jak detektor kliknięć i będzie otrzymywać powiadomienia o długich kliknięciach za pomocą wywołania zwrotnego onInfoWindowClose(Marker).

Aby otrzymywać powiadomienia o zamknięciu okna z informacjami, użyj zmiennej OnInfoWindowCloseListener, którą możesz ustawić, wywołując funkcję GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Otrzymasz wywołanie zwrotne onInfoWindowClose(Marker).

Uwaga dotycząca odświeżania okna informacji: zdarzenie onInfoWindowClose() jest wywoływane, gdy użytkownik odświeża okno informacji przez kliknięcie znacznika, które ma już otwarte okno informacji. Jeśli jednak wywołasz Marker.showInfoWindow() programowo w otwartym oknie informacji, zdarzenie onInfoWindowClose() się nie uruchomi. To drugie zachowanie jest oparte na założeniu, że wiesz, że okno z informacjami zamknie się i otworzy ponownie.

Jak wspomnieliśmy w poprzedniej sekcji dotyczącej okien z informacjami, okno z informacjami nie jest widokiem na żywo. Zamiast tego widok jest renderowany jako obraz na mapie. W efekcie wszystkie detektory ustawione w widoku są ignorowane i nie możesz odróżnić zdarzeń kliknięcia w różnych częściach widoku. Zalecamy, aby w oknie z informacjami nie umieszczać elementów interaktywnych, takich jak przyciski, pola wyboru czy pola tekstowe.