Finestre informative

Seleziona la piattaforma: Android iOS JavaScript

Una finestra informativa mostra testo o immagini in una finestra popup sopra la mappa. Le finestre informative sono sempre ancorate a un indicatore. Per impostazione predefinita, viene visualizzato al tocco dell'indicatore.

Esempi di codice

Il repository ApiDemos su GitHub include un esempio che dimostra tutte le funzionalità della finestra informativa:

Introduzione

Una finestra informativa consente di mostrare informazioni all'utente quando tocca un indicatore. Viene visualizzata una sola finestra informativa alla volta. Se un utente fa clic su un indicatore, la finestra informativa corrente viene chiusa e visualizzata la nuova finestra. Tieni presente che se l'utente fa clic su un indicatore che mostra attualmente una finestra informativa, questa si chiude e si riapre.

Una finestra informativa è disegnata orientata verso lo schermo del dispositivo, centrata sopra l'indicatore associato. La finestra informativa predefinita contiene il titolo in grassetto, con il testo dello snippet (facoltativo) sotto il titolo.

Aggiungi una finestra informativa

Il modo più semplice per aggiungere una finestra informativa consiste nell'impostare i metodi title() e snippet() dell'indicatore corrispondente. L'impostazione di queste proprietà comporta la visualizzazione di una finestra informativa ogni volta che viene fatto clic sull'indicatore.

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"));

      

Mostra/nascondi una finestra informativa

Le finestre informative sono progettate per rispondere agli eventi di tocco degli utenti. Se preferisci, puoi mostrare in modo programmatico una finestra informativa chiamando il showInfoWindow() sull'indicatore della destinazione. Puoi nascondere una finestra informativa chiamando il numero 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();

      

Puoi anche creare finestre informative per singoli indicatori in cluster. Leggi la guida per aggiungere una finestra informativa per singoli indicatori in cluster.

Finestre informative personalizzate

Puoi anche personalizzare i contenuti e l'aspetto delle finestre informative. A questo scopo, devi creare un'implementazione concreta dell'interfaccia di InfoWindowAdapter e quindi chiamare GoogleMap.setInfoWindowAdapter() con l'implementazione. L'interfaccia contiene due metodi per l'implementazione: getInfoWindow(Marker) e getInfoContents(Marker). L'API chiamerà prima getInfoWindow(Marker) e, se null viene restituita, chiamerà getInfoContents(Marker). Se restituisce anche null, verrà utilizzata la finestra informativa predefinita.

Il primo (getInfoWindow()) consente di fornire una visualizzazione che verrà utilizzata per l'intera finestra informativa. Il secondo (getInfoContents()) ti consente di personalizzare i contenuti della finestra, mantenendo al contempo lo sfondo e l'inquadratura predefiniti della finestra informativa.

Le immagini di seguito mostrano una finestra informativa predefinita, una finestra informativa con contenuti personalizzati e una finestra informativa con cornice e sfondo personalizzati.

Confronto tra finestre informative

Eventi della finestra informativa

L'esempio di MarkerDemoActivity include un codice di esempio per la registrazione e la gestione degli eventi della finestra informativa.

Puoi utilizzare un elemento OnInfoWindowClickListener per ascoltare gli eventi di clic in una finestra informativa. Per impostare questo listener sulla mappa, chiama GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener). Quando un utente fa clic su una finestra informativa, viene richiamato l'opzione onInfoWindowClick(Marker) e la finestra informativa viene evidenziata con il colore di evidenziazione predefinito (grigio).

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

      

Analogamente, puoi ascoltare gli eventi di clic lungo con un elemento OnInfoWindowLongClickListener, che puoi impostare chiamando GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Questo listener si comporta in modo simile a quello dei clic e riceverà una notifica per gli eventi di clic lunghi con un callback onInfoWindowClose(Marker).

Per ricevere una notifica quando la finestra informativa si chiude, utilizza un OnInfoWindowCloseListener, che puoi impostare chiamando GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener). Riceverai un callback onInfoWindowClose(Marker).

Nota sull'aggiornamento di una finestra informativa: l'evento onInfoWindowClose() viene attivato se l'utente aggiorna una finestra informativa toccando un indicatore che ha già una finestra informativa aperta. Tuttavia, se chiami in modo programmatico Marker.showInfoWindow() in una finestra informativa aperta, l'evento onInfoWindowClose() non viene attivato. Il secondo comportamento si basa sul presupposto che la finestra informativa verrà chiusa e riaprita.

Come menzionato nella sezione precedente sulle finestre informative, questa non è una visione in diretta. ma viene invece visualizzata come un'immagine sulla mappa. Di conseguenza, tutti i listener che imposti nella vista vengono ignorati e non puoi distinguere tra gli eventi di clic in varie parti della vista. Sconsigliamo di posizionare componenti interattivi, come pulsanti, caselle di controllo o input di testo, all'interno della finestra informativa personalizzata.