Créer des repères avec des vues personnalisées

Image 3D de New York montrant l'Empire State Building avec trois repères numériques personnalisés flottant au-dessus, dont un gorille de dessin animé étiqueté

Vous pouvez utiliser MarkerView pour afficher des hiérarchies Android View personnalisées en tant que repères sur une carte 3D. Les repères de vue personnalisés vous permettent d'afficher des mises en page d'interface utilisateur enrichies, des widgets interactifs et des animations de vue ancrés à des coordonnées géographiques.

Ajouter un repère de vue personnalisé

Pour ajouter un repère de vue personnalisé à votre carte, créez une MarkerViewOptions instance, configurez son emplacement avec setPosition à l'aide d'un objet LatLngAltitude, puis fournissez votre View Android personnalisé à l'aide de setContent. Transmettez ensuite les options à addMarkerView sur votre GoogleMap3D instance.

Si vous ne fournissez pas de vue à setContent, le SDK crée et affiche un PinViewpar défaut.

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

Personnaliser le PinView par défaut

Au lieu de créer un Android View entièrement personnalisé, vous pouvez afficher un repère personnalisé en créant un PinView avec un PinConfiguration personnalisé (ou en mettant à jour une instance existante avec setPinConfiguration) et en le transmettant à 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)

Gérer les interactions et les animations

Étant donné qu'un MarkerView encapsule un View, vous pouvez associer des écouteurs de clic standards et afficher animations directement à la vue renvoyée par getContent.

De plus, MarkerView implémente Anchorable, ce qui vous permet d'ancrer un Popover à la vue du repère à l'aide de addPopover :

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

Configurer l'altitude et le comportement en cas de collision

Vous pouvez personnaliser le positionnement vertical d'un MarkerView et son interaction avec les libellés ou repères de carte qui se chevauchent :

Accessibilité et suppression

Vous êtes responsable de la configuration des propriétés d'accessibilité, telles que contentDescription—sur le View Android personnalisé fourni à setContent.

Pour supprimer un MarkerView de la carte, appelez remove :

markerView?.remove()