Markierungen mit benutzerdefinierten Ansichten erstellen

3D-Bild von New York City mit dem Empire State Building und drei benutzerdefinierten digitalen Markierungen, die darüber schweben, darunter ein Cartoon-Gorilla mit der Beschriftung

Sie können MarkerView verwenden, um benutzerdefinierte Android-View Hierarchien als Markierungen auf einer 3D-Karte zu rendern. Mit benutzerdefinierten Ansichtsmarkierungen können Sie umfangreiche UI-Layouts, interaktive Widgets und Ansichtsanimationen anzeigen, die an geografische Koordinaten verankert sind.

Benutzerdefinierte Ansichtsmarkierung hinzufügen

Wenn Sie Ihrer Karte eine benutzerdefinierte Ansichtsmarkierung hinzufügen möchten, erstellen Sie eine MarkerViewOptions -Instanz, konfigurieren Sie ihre Position mit setPosition mithilfe eines LatLngAltitude -Objekts und geben Sie Ihre benutzerdefinierte Android View mit setContent an. Übergeben Sie dann die Optionen an addMarkerView in Ihrer GoogleMap3D Instanz.

Wenn Sie für setContentkeine Ansicht angeben, erstellt und rendert das SDK eine Standard- PinView.

// Add imports
import android.widget.TextView
import com.google.android.gms.maps3d.model.MarkerViewOptions
import com.google.android.gms.maps3d.model.latLngAltitude

// Create a custom Android View
val badgeView = TextView(context).apply {
    text = "Empire State Building"
    contentDescription = "Marker for Empire State Building"
    setPadding(24, 12, 24, 12)
}

// Configure MarkerViewOptions and add the marker view to the map
val options = MarkerViewOptions().apply {
    position = latLngAltitude {
        latitude = 40.7484
        longitude = -73.9857
        altitude = 100.0
    }
    content = badgeView
}

val markerView = googleMap3D.addMarkerView(options)

Standard-PinView anpassen

Anstatt eine komplett benutzerdefinierte Android-View zu erstellen, können Sie eine angepasste Stecknadel rendern, indem Sie eine PinView mit einer benutzerdefinierten PinConfiguration erstellen (oder eine vorhandene Instanz mit setPinConfiguration) aktualisieren) und sie an setContentübergeben.

// Add imports
import android.graphics.Color
import com.google.android.gms.maps3d.model.MarkerViewOptions
import com.google.android.gms.maps3d.model.PinView
import com.google.android.gms.maps3d.model.latLngAltitude
import com.google.android.gms.maps3d.model.pinConfiguration

// Create a customized PinView
val customPinView = PinView(context, pinConfiguration {
    backgroundColor = Color.BLUE
    borderColor = Color.WHITE
})

// Configure MarkerViewOptions and add the marker view to the map
val options = MarkerViewOptions().apply {
    position = latLngAltitude {
        latitude = 40.7484
        longitude = -73.9857
        altitude = 100.0
    }
    content = customPinView
}

val markerView = googleMap3D.addMarkerView(options)

Interaktionen und Animationen verarbeiten

Da eine MarkerView eine Android-Viewumschließt, können Sie Standard-Click-Listener und Ansicht animationen direkt an die von getContentzurückgegebene Ansicht anhängen.

Außerdem MarkerView implementiert Anchorable, mit dem Sie mit addPopoverein Popover an der Markierungsansicht verankern können:

markerView?.content?.setOnClickListener { view ->
    // Animate the view when clicked
    view.animate().rotationBy(90f).setDuration(300).start()
}

Höhe und Konfliktverhalten konfigurieren

Sie können anpassen, wie eine MarkerView vertikal positioniert wird und wie sie mit überlappenden Kartenlabels oder Markierungen interagiert:

Barrierefreiheit und Entfernung

Sie sind für die Konfiguration von Barrierefreiheitseigenschaften wie contentDescription für die benutzerdefinierte Android-View verantwortlich, die an setContent übergeben wird.

Um ein MarkerView von der Karte zu entfernen, rufen Sie removeauf:

markerView?.remove()