Okna informacyjne

Wybierz platformę: Android iOS JavaScript

W oknie informacyjnym nad mapą wyświetla się tekst lub obrazy w wyskakującym okienku. Informacje okna są zawsze zakotwiczone do znacznika. Domyślne działanie to będzie się wyświetlać po dotknięciu znacznika.

Przykładowe fragmenty kodu

Repozytorium API Apigee na GitHubie zawiera przykład ilustrujący wszystkie funkcje okna informacyjnego:

Wprowadzenie

Okno informacyjne umożliwia wyświetlenie informacji użytkownikowi, który go kliknie znacznik. Wyświetlane jest tylko jedno okno informacyjne naraz. Jeśli użytkownik kliknie znacznik, bieżące okno informacyjne zostanie zamknięte, a nowe okno informacyjne . Pamiętaj, że jeśli użytkownik kliknie znacznik, który jest w danej chwili pokazuje okno informacyjne, zamyka się i otwiera z powrotem.

Okno informacyjne jest wyśrodkowane na ekranie urządzenia nad powiązanym znacznikiem. Domyślne okno informacyjne zawiera tytuł pogrubioną czcionką, tekst rozszerzenia (opcjonalny) pod tytułem.

Dodaj okno informacyjne

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

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ą zaprojektowane w taki sposób, aby reagować na zdarzenia dotknięcia użytkownika. Jeśli wolisz, może automatycznie wyświetlić okno informacyjne, wywołując showInfoWindow() na znaczniku celu. Okno informacyjne można ukryć, dzwoniąc 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 znaczników klastrowanych. Przeczytaj przewodnik na temat dodawania okna informacyjnego dla poszczególnych znaczników klastra.

Niestandardowe okna informacyjne

Możesz również dostosować zawartość i wygląd okien informacyjnych. Do zrobienia musisz utworzyć konkretną implementację Interfejs InfoWindowAdapter, a następnie wywołaj GoogleMap.setInfoWindowAdapter() wraz z implementacji. Interfejs zawiera 2 metody implementacji: getInfoWindow(Marker) i getInfoContents(Marker). Interfejs API najpierw wywoła metodę getInfoWindow(Marker), a jeśli null zostanie zwrócony wynik getInfoContents(Marker). Jeśli to także zostanie zwrócone null, zostanie użyte domyślne okno informacyjne.

Pierwszy z nich (getInfoWindow()) pozwala udostępnić widok, który zostanie użyty dla całego okna informacyjnego. Druga z tych opcji (getInfoContents()) pozwala dostosować zawartość okna ale zachowaj domyślną ramkę i tło okna informacyjnego.

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

Zdarzenia w oknie informacyjnym

Przykładowy kod MarkerDemoActivity zawiera przykładowy kod: rejestrowania i obsługi zdarzeń w oknie informacyjnym.

OnInfoWindowClickListener pozwala nasłuchu zdarzeń kliknięcia w oknie informacyjnym. Aby ustawić ten odbiornik na mapie, zadzwoń do: GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Kiedy użytkownik kliknie okno informacyjne, onInfoWindowClick(Marker) zostaje wywołany a okno informacyjne jest wyróżnione domyślnym kolorem zaznaczenia (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ą funkcji OnInfoWindowLongClickListener, można ustawić, wywołując GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener) Ten odbiornik działa podobnie jak detektor kliknięć i zostanie powiadomiony zdarzenia długiego kliknięcia z wywołaniem zwrotnym onInfoWindowClose(Marker).

Aby otrzymać powiadomienie o zamknięciu okna informacyjnego, użyj OnInfoWindowCloseListener, które możesz ustawiany przez wywołanie GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener) Ty otrzymać wywołanie zwrotne onInfoWindowClose(Marker).

Uwaga na temat odświeżania okna informacyjnego: zdarzenie onInfoWindowClose() jest uruchamiane, jeśli: użytkownik odświeża okno informacyjne, klikając znacznik, który ma już otwarte okna informacyjnego. Jeśli jednak wywołujesz automatyczne połączenie z numerem Marker.showInfoWindow() otworzy się okno informacyjne, zdarzenie onInfoWindowClose() się nie uruchomi. To ostatnie zachowanie opiera się na założeniu, że masz świadomość, że okno informacyjne zamknij i ponownie otwórz.

Jak wspomnieliśmy w poprzedniej sekcji dotyczącej okien informacyjnych, okno informacyjne nie jest podgląd na żywo. Widok jest natomiast renderowany na mapie jako obraz. Jako spowoduje to zignorowanie wszystkich ustawionych w tym widoku detektorów i nie będzie można rozróżnia zdarzenia kliknięcia w różnych częściach widoku. Zalecamy nie umieszczaj w nich komponentów interaktywnych, takich jak przyciski, pola wyboru czy tekst. danych wejściowych – w oknie informacyjnym.