Cómo crear marcadores con vistas personalizadas

Puedes usar MarkerView para renderizar jerarquías de Android View personalizadas como marcadores en un mapa 3D. Los marcadores de vista personalizada te permiten mostrar diseños de la IU enriquecidos, widgets interactivos y animaciones de vista ancladas a coordenadas geográficas.

Nota: Los marcadores de vista personalizada (MarkerView) ofrecen mayor personalización e interactividad que los marcadores 3D estándar (Marker), que se renderizan con una sobrecarga menor. Para las aplicaciones con una gran cantidad de marcadores, se recomiendan las instancias de Marker estándar agregadas con addMarker para mantener un rendimiento óptimo.

Agrega un marcador de vista personalizada

Para agregar un marcador de vista personalizada a tu mapa, crea una MarkerViewOptions instancia, configura su ubicación con setPosition usando un LatLngAltitude objeto y proporciona tu View de Android personalizada con setContent. Luego, pasa las opciones a addMarkerView en tu GoogleMap3D instancia.

Si no proporcionas una vista a setContent, el SDK crea y renderiza un PinViewpredeterminado.

// 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)

Personaliza el PinView predeterminado

En lugar de crear un View de Android completamente personalizado, puedes renderizar un pin personalizado creando un PinView con un PinConfiguration personalizado (o actualizando una instancia existente con setPinConfiguration) y pasándolo a setContent.

// 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)

Cómo controlar interacciones y animaciones

Debido a que a MarkerView incluye una View de Android, puedes adjuntar objetos de escucha de clics estándar y animaciones de vista directamente a la vista que muestra getContent.

Además, MarkerView implementa Anchorable, que te permite anclar un Popover a la vista del marcador con addPopover:

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

Configura la altitud y el comportamiento de colisión

Puedes personalizar la posición vertical de un MarkerView y cómo interactúa con las etiquetas o los marcadores superpuestos del mapa:

• Modo de altitud: Llama a setAltitudeMode en MarkerViewOptions con una constante AltitudeMode. De forma predeterminada, MarkerViewOptions usa AltitudeMode.CLAMP_TO_GROUND.
• Comportamiento de colisión: Llama a setCollisionBehavior con una constante CollisionBehavior CollisionBehavior.REQUIRED (el valor predeterminado es ), y usa setCollisionPriority para especificar la prioridad de visualización cuando los marcadores colisionan.

Accesibilidad y eliminación

Eres responsable de configurar las propiedades de accesibilidad, como contentDescription—en la View de Android personalizada que se proporciona a setContent.

Para quitar un MarkerView del mapa, llama a remove:

markerView?.remove()