Okna informacyjne

Wybierz platformę: Android iOS JavaScript

W oknie informacyjnym nad mapą widać tekst lub obrazy w wyskakującym okienku. Okna informacyjne są zawsze zakotwiczone do znacznika. Domyślnie wyświetla się po dotknięciu znacznika.

Przykładowe fragmenty kodu

W repozytorium APIDemos na GitHubie jest przykład, który przedstawia wszystkie funkcje okna informacyjnego:

Wstęp

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

Okno informacyjne jest wyświetlane zorientowane na ekran urządzenia i wyśrodkowane nad powiązanym znacznikiem. Domyślne okno informacyjne zawiera pogrubiony tytuł, a pod tytułem znajduje się (opcjonalny) fragment tekstu.

Dodaj okno informacyjne

Najprostszym sposobem dodania okna informacyjnego jest ustawienie metod title() i snippet() odpowiedniego znacznika. Ustawienie tych właściwości spowoduje, że po kliknięciu znacznika będzie wyświetlane okno informacyjne.

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łużą do reagowania na zdarzenia dotknięcia użytkownika. Jeśli wolisz, możesz automatycznie wyświetlić okno informacyjne, wywołując metodę showInfoWindow() na znaczniku celu. Okno informacyjne można ukryć, wywołując metodę 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ż utworzyć okna informacyjne dla pojedynczych znaczników połączonych. Przeczytaj przewodnik na temat dodawania okna informacyjnego dla pojedynczych znaczników w klastrach.

Niestandardowe okna informacyjne

Możesz również dostosować zawartość i wygląd okien informacyjnych. W tym celu musisz utworzyć konkretną implementację interfejsu InfoWindowAdapter, a potem wywołać metodę GoogleMap.setInfoWindowAdapter() za pomocą tej implementacji. Interfejs zawiera 2 metody implementacji: getInfoWindow(Marker) i getInfoContents(Marker). Interfejs API najpierw wywoła metodę getInfoWindow(Marker), a po zwróceniu parametru null wywoła metodę getInfoContents(Marker). Jeśli ta opcja również zwraca wartość null, zostanie użyte domyślne okno informacyjne.

Pierwsza z nich (getInfoWindow()) umożliwia udostępnienie widoku, który będzie używany dla całego okna informacyjnego. Drugi z nich (getInfoContents()) pozwala dostosować zawartość okna bez utraty domyślnej ramki okna informacyjnego i tła.

Na poniższych obrazach widać domyślne okno informacyjne, okno informacyjne ze spersonalizowaną treścią oraz okno informacyjne ze spersonalizowaną ramką i tłem.

Porównanie okna informacyjnego

zdarzenia z okna informacyjnego,

Przykład MarkerDemoActivity zawiera przykładowy kod do rejestrowania i obsługi zdarzeń okna informacyjnego.

Aby nasłuchiwać zdarzeń kliknięć w oknie informacyjnym, możesz użyć elementu OnInfoWindowClickListener. Aby ustawić ten detektor na mapie, wywołaj GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Gdy użytkownik kliknie okno informacyjne, wywoływane jest narzędzie onInfoWindowClick(Marker), a okno informacyjne jest wyróżnione domyślnym kolorem wyróżnienia (szarym).

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();
    }
}

Analogicznie możesz nasłuchiwać zdarzeń długich kliknięć za pomocą OnInfoWindowLongClickListener, które możesz ustawić, wywołując metodę GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Ten detektor działa podobnie do detektora kliknięć i będzie otrzymywać powiadomienia o zdarzeniach długich kliknięć za pomocą wywołania zwrotnego onInfoWindowClose(Marker).

Aby otrzymać powiadomienie o zamknięciu okna informacyjnego, użyj funkcji OnInfoWindowCloseListener, którą możesz ustawić, wywołując GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Otrzymasz wywołanie zwrotne onInfoWindowClose(Marker).

Uwaga na temat odświeżania okna informacyjnego: zdarzenie onInfoWindowClose() jest uruchamiane, gdy użytkownik odświeży okno informacyjne, klikając znacznik, który ma już otwarte okno informacyjne. Jeśli jednak programowo wywołasz funkcję Marker.showInfoWindow() w otwartym oknie informacyjnym, zdarzenie onInfoWindowClose() nie zostanie uruchomione. To ostatnie działanie opiera się na założeniu, że zdajesz sobie sprawę, że okno informacyjne zamyka się i ponownie otwiera.

Jak wspomnieliśmy w poprzedniej sekcji o oknach informacyjnych, okno informacyjne nie jest podglądem na żywo. Widok jest wtedy renderowany jako obraz na mapie. W związku z tym wszystkie detektory ustawione w widoku są ignorowane i nie można rozróżniać zdarzeń kliknięć w różnych częściach widoku. Nie zalecamy umieszczania w niestandardowym oknie informacyjnym elementów interaktywnych, takich jak przyciski, pola wyboru czy dane wejściowe.