Membuat penanda dengan tampilan kustom

Gambar 3D New York City yang menampilkan Empire State Building dengan tiga penanda digital kustom yang melayang di atasnya, termasuk gorila kartun berlabel

Anda dapat menggunakan MarkerView untuk merender hierarki Android Viewkustom sebagai penanda di peta 3D. Penanda tampilan kustom memungkinkan Anda menampilkan tata letak UI yang kaya, widget interaktif, dan animasi tampilan yang ditautkan ke koordinat geografis.

Menambahkan penanda tampilan kustom

Untuk menambahkan penanda tampilan kustom ke peta, buat MarkerViewOptions instance, konfigurasi lokasinya dengan setPosition menggunakan objek LatLngAltitude, dan berikan View Android kustom Anda menggunakan setContent. Kemudian, teruskan opsi ke addMarkerView pada instance GoogleMap3D Anda.

Jika Anda tidak memberikan tampilan ke setContent, SDK akan membuat dan merender PinView default.

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

Menyesuaikan PinView default

Daripada membuat Android View yang sepenuhnya kustom, Anda dapat merender pin yang disesuaikan dengan membuat PinView dengan PinConfiguration kustom (atau memperbarui instance yang ada dengan setPinConfiguration) dan meneruskannya ke 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)

Menangani interaksi dan animasi

Karena a MarkerView menggabungkan View Android, Anda dapat melampirkan pemroses klik standar dan melihat animasi langsung ke tampilan yang ditampilkan oleh getContent.

Selain itu, MarkerView mengimplementasikan Anchorable, yang memungkinkan Anda menautkan Popover ke tampilan penanda menggunakan addPopover:

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

Mengonfigurasi ketinggian dan perilaku saat tumpang tindih

Anda dapat menyesuaikan posisi MarkerView secara vertikal dan cara interaksinya dengan label atau penanda peta yang tumpang tindih:

Aksesibilitas dan penghapusan

Anda bertanggung jawab untuk mengonfigurasi properti aksesibilitas—seperti contentDescription—di Android kustom View yang diberikan ke setContent.

Untuk menghapus MarkerView dari peta, panggil remove:

markerView?.remove()