สร้างเครื่องหมายด้วยมุมมองที่กำหนดเอง

รูปภาพ 3 มิติของนครนิวยอร์กที่มีอาคารเอ็มไพร์สเตตพร้อมเครื่องหมายดิจิทัลที่กำหนดเอง 3 รายการลอยอยู่ด้านบน ซึ่งรวมถึงกอริลลาการ์ตูนที่มีป้ายกำกับ

คุณสามารถใช้ MarkerView เพื่อแสดงผลลำดับชั้น Android ที่กำหนดเองViewเป็นเครื่องหมายบนแผนที่ 3 มิติ เครื่องหมายมุมมองที่กำหนดเองช่วยให้คุณแสดงเลย์เอาต์ของ UI ที่สมบูรณ์ วิดเจ็ตแบบอินเทอร์แอกทีฟ และภาพเคลื่อนไหวของมุมมองที่ยึดตามพิกัดทางภูมิศาสตร์

เพิ่มเครื่องหมายมุมมองที่กำหนดเอง

หากต้องการเพิ่มเครื่องหมายมุมมองที่กำหนดเองลงในแผนที่ ให้สร้าง 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 เริ่มต้น

แทนที่จะสร้าง Android View ที่กำหนดเองทั้งหมด คุณสามารถแสดงผลหมุดที่ปรับแต่งแล้วได้โดยการสร้าง 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 คุณจึงแนบฟังก์ชันรอคลิกมาตรฐานและภาพเคลื่อนไหวของมุมมอง เข้ากับมุมมองที่แสดงผลโดย getContentได้โดยตรง

นอกจากนี้ MarkerView ยังใช้ Anchorable ซึ่งช่วยให้คุณยึด Popover กับมุมมองเครื่องหมายได้โดยใช้ addPopoverดังนี้

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

กำหนดค่าความสูงและลักษณะการทำงานเมื่อเกิดการชนกัน

คุณสามารถปรับแต่งวิธีวางตำแหน่ง MarkerView ในแนวตั้งและวิธีโต้ตอบกับป้ายกำกับหรือ เครื่องหมายแผนที่ที่ซ้อนทับกันได้ ดังนี้

การช่วยเหลือพิเศษและการนำออก

คุณมีหน้าที่รับผิดชอบในการกำหนดค่าพร็อพเพอร์ตี้การช่วยเหลือพิเศษ เช่น contentDescription ใน Android ที่กำหนดเอง View ที่ระบุไว้ใน setContent

หากต้องการนำ MarkerView ออกจากแผนที่ ให้เรียกใช้ removeดังนี้

markerView?.remove()