Okna informacyjne

Wybierz platformę: Android iOS JavaScript

W oknie informacyjnym nad mapą wyświetla się tekst lub obrazy w wyskakującym okienku. Okna informacji są zawsze zakotwiczone do oznacznika. Domyślne działanie to który wyświetla się 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świetlanie użytkownikowi informacji po kliknięciu przez niego znacznika. W danym momencie wyświetlane jest tylko jedno okno informacyjne. 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 z informacjami jest wyświetlane na ekranie urządzenia, na środku 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.

Okna informacyjne niestandardowe

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). API najpierw wywoła funkcję getInfoWindow(Marker), a jeśli zwróci ona wartość null, wywoła funkcję getInfoContents(Marker). Jeśli to także zostanie zwrócone null, zostanie użyte domyślne okno informacyjne.

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

Obrazy poniżej przedstawiają domyślne okno informacyjne, okno z niestandardową zawartością oraz okno z niestandardową 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łuchiwać 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 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ł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. Zamiast tego widok jest renderowany jako obraz na mapie. W efekcie wszystkie detektory ustawione w widoku są ignorowane i nie możesz rozróżniać zdarzeń 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.