יצירת סמנים עם תצוגות בהתאמה אישית

תמונה בתלת-ממד של העיר ניו יורק, שבה רואים את בניין האמפייר סטייט עם שלושה סמנים דיגיטליים מותאמים אישית שמרחפים מעליו, כולל גורילה מצוירת עם הכיתוב

אתם יכולים להשתמש ב-MarkerView כדי לרנדר היררכיות View מותאמות אישית של Android כסמנים במפה תלת-ממדית. סמנים של תצוגה בהתאמה אישית מאפשרים להציג פריסות של ממשק המשתמש עשירות, ווידג'טים אינטראקטיביים ואנימציות של תצוגה שמעוגנות לקואורדינטות גיאוגרפיות.

הוספת סמן של תצוגה מותאמת אישית

כדי להוסיף סמן של תצוגה מותאמת אישית למפה, יוצרים מופע של MarkerViewOptions, מגדירים את המיקום שלו באמצעות setPosition באמצעות אובייקט LatLngAltitude, ומספקים את View המותאם אישית ל-Android באמצעות setContent. לאחר מכן, מעבירים את האפשרויות אל addMarkerView במכונה של GoogleMap3D.

אם לא מציינים תצוגה ל-setContent, ה-SDK יוצר ומציג 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)

התאמה אישית של ברירת המחדל של PinView

במקום ליצור View בהתאמה אישית מלאה ב-Android, אפשר ליצור סיכה בהתאמה אישית על ידי יצירת PinView עם PinConfiguration בהתאמה אישית (או עדכון של מופע קיים באמצעות setPinConfiguration) והעברה שלו אל 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)

טיפול באינטראקציות ובאנימציות

מכיוון ש-MarkerView כולל View של Android, אפשר לצרף רכיבי click listener רגילים ולהציג אנימציות ישירות בתצוגה שמוחזרת על ידי getContent.

בנוסף, MarkerView מטמיע את Anchorable, שמאפשר לעגן Popover לתצוגת הסמן באמצעות addPopover:

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

הגדרת גובה והתנהגות במקרה של התנגשות

אתם יכולים להתאים אישית את המיקום האנכי של MarkerView ואת האינטראקציה שלו עם תוויות או סמנים חופפים במפה:

נגישות והסרה

אתם אחראים להגדיר את מאפייני הנגישות, כמו contentDescription, ב-View המותאם אישית של Android שסופק ל-setContent.

כדי להסיר MarkerView מהמפה, מפעילים את remove:

markerView?.remove()