คอมโพเนนต์รายละเอียดสถานที่

คอมโพเนนต์รายละเอียดสถานที่ของชุด UI ของสถานที่ช่วยให้คุณเพิ่มคอมโพเนนต์ UI แต่ละรายการที่แสดงรายละเอียดสถานที่ในแอปได้

PlaceDetailsCompactFragment จะแสดงรายละเอียดของสถานที่ที่เลือกโดยใช้พื้นที่น้อยที่สุด ซึ่งอาจมีประโยชน์ในหน้าต่างข้อมูลไฮไลต์สถานที่บนแผนที่ ในประสบการณ์การใช้งานโซเชียลมีเดีย เช่น การแชร์ตำแหน่งในแชท คำแนะนำในการเลือกตำแหน่งปัจจุบัน หรือภายในบทความสื่อเพื่ออ้างอิงสถานที่ใน Google Maps PlaceDetailsCompactFragment สามารถแสดงชื่อ ที่อยู่ คะแนน ประเภท ราคา ไอคอนการช่วยเหลือพิเศษ สถานะ "เปิด" และรูปภาพเดียว

คุณสามารถใช้คอมโพเนนต์รายละเอียดสถานที่ได้แบบอิสระหรือร่วมกับ API และบริการอื่นๆ ของ Google Maps Platform คอมโพเนนต์จะใช้รหัสสถานที่หรือพิกัดละติจูด/ลองจิจูด แล้วแสดงผลข้อมูลรายละเอียดสถานที่ที่ผ่านการจัดการแสดงผล

การเรียกเก็บเงิน

เมื่อใช้ชุดเครื่องมือ UI ของรายละเอียดสถานที่ ระบบจะเรียกเก็บเงินจากคุณทุกครั้งที่มีการเรียกใช้เมธอด .loadWithPlaceId() หรือ .loadWithResourceName() หากคุณโหลดสถานที่เดียวกันหลายครั้ง ระบบจะเรียกเก็บเงินสำหรับการขอแต่ละครั้ง

อย่าเพิ่ม .loadWithPlaceId() หรือ .loadWithResourceName() ในเมธอดวงจรชีวิตของ Android โดยตรงเพื่อหลีกเลี่ยงการเรียกเก็บเงินหลายครั้ง เช่น อย่าเรียก .loadWithPlaceId() หรือ .loadWithResourceName() ในเมธอด onResume() โดยตรง

เพิ่มรายละเอียดสถานที่ลงในแอป

คุณสามารถเพิ่มรายละเอียดสถานที่ลงในแอปได้โดยเพิ่มข้อมูลโค้ดไปยังเลย์เอาต์ เมื่อสร้างอินสแตนซ์ของข้อมูลโค้ดที่แยกส่วน คุณจะปรับแต่งรูปลักษณ์ของข้อมูลรายละเอียดสถานที่ให้เหมาะกับความต้องการและเข้ากับลักษณะที่ปรากฏของแอปได้

คุณมี 2 วิธีที่ใช้ได้ทั้งใน Kotlin และ Java วิธีหนึ่งจะโหลดข้อมูลโค้ดที่ตัดตอนมาโดยใช้รหัสสถานที่ (loadWithPlaceId()) และอีกวิธีจะโหลดข้อมูลโค้ดที่ตัดตอนมาโดยใช้ชื่อทรัพยากร (loadWithResourceName()) คุณเลือกวิธีใดวิธีหนึ่งหรือทั้ง 2 วิธีก็ได้หากใช้ทั้งรหัสสถานที่และชื่อทรัพยากร

คุณสามารถระบุการวางแนว (แนวนอนหรือแนวตั้ง) การลบล้างธีม และเนื้อหา ตัวเลือกเนื้อหา ได้แก่ สื่อ ที่อยู่ คะแนน ราคา ประเภท ทางเข้าที่เข้าถึงได้ และสถานะ "เปิดอยู่" ดูข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่ง

Kotlin

val fragment = PlaceDetailsCompactFragment.newInstance(
  orientation,
  listOf(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE_ICON),
  R.style.CustomizedPlaceDetailsTheme
)
      
fragment.setPlaceLoadListener(object : PlaceLoadListener {
  override fun onSuccess(place: Place) { ... }
      
  override fun onFailure(e: Exception) { ... }
})
      
supportFragmentManager
  .beginTransaction()
  .add(R.id.fragment_container, fragment)
  .commitNow()
      
// Load the fragment with a Place ID.
fragment.loadWithPlaceId(placeId)
// Load the fragment with a resource name.
//fragment.loadWithResourceName(resourceName)

Java

      
PlaceDetailsCompactFragment fragment =
  PlaceDetailsCompactFragment.newInstance(
        Orientation.HORIZONTAL,
        Arrays.asList(Content.ADDRESS, Content.TYPE, Content.RATING, Content.ACCESSIBLE_ENTRANCE_ICON),
        R.style.CustomizedPlaceDetailsTheme);
    
fragment.setPlaceLoadListener(
  new PlaceLoadListener() {
        @Override public void onSuccess(Place place) { ... }
    
        @Override public void onFailure(Exception e) { ... }
});
    
getSupportFragmentManager()
      .beginTransaction()
      .add(R.id.fragment_container, fragment)
      .commitNow();
    
// Load the fragment with a Place ID.
fragment.loadWithPlaceId(placeId);
      
// Load the fragment with a resource name.
// fragment.loadWithResourceName(resourceName);

ดูโค้ดที่สมบูรณ์เพื่อโหลดวิดเจ็ตรายละเอียดสถานที่

Kotlin

        import android.os.Bundle
        import android.util.Log
        import android.view.View
        import android.widget.FrameLayout
        import androidx.appcompat.app.AppCompatActivity
        import com.google.android.gms.maps.CameraUpdateFactory
        import com.google.android.gms.maps.GoogleMap
        import com.google.android.gms.maps.OnMapReadyCallback
        import com.google.android.gms.maps.SupportMapFragment
        import com.google.android.gms.maps.model.LatLng
        import com.google.android.gms.maps.model.PointOfInterest
        import com.google.android.libraries.places.api.Places
        import com.google.android.libraries.places.api.net.PlacesClient
        import com.google.android.libraries.places.widget.PlaceDetailsCompactFragment
        import com.google.android.libraries.places.widget.PlaceDetailsCompactFragment.Companion.ALL_CONTENT
        import com.google.android.libraries.places.widget.model.Orientation
        
        class MainActivity : AppCompatActivity(), OnMapReadyCallback, GoogleMap.OnPoiClickListener {
            private var googleMap: GoogleMap? = null
            private val orientation: Orientation = Orientation.HORIZONTAL
            private lateinit var placesClient: PlacesClient
            private var placeDetailsFragment: PlaceDetailsCompactFragment? = null
        
            override fun onCreate(savedInstanceState: Bundle?) {
                super.onCreate(savedInstanceState)
                setContentView(R.layout.activity_main)
        
                // --- Initialize Places SDK ---
                val apiKey = BuildConfig.PLACES_API_KEY
                if (apiKey.isEmpty()) {
                    Log.e("Places test", "No api key")
                    finish()
                    return
                }
                Places.initializeWithNewPlacesApiEnabled(applicationContext, apiKey)
                placesClient = Places.createClient(this)
                // -----------------------------
        
                val mapFragment = supportFragmentManager.findFragmentById(R.id.map_fragment) as SupportMapFragment?
                mapFragment?.getMapAsync(this)
            }
        
            override fun onMapReady(map: GoogleMap) {
                googleMap = map
                val sydney = LatLng(-33.8688, 151.2093)
                val zoomLevel = 13f
                googleMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, zoomLevel))
                googleMap?.setOnPoiClickListener(this)
            }
        
            override fun onPoiClick(poi: PointOfInterest) {
                val placeId = poi.placeId
                Log.d("POI Click", "Place ID: $placeId")
                showPlaceDetailsFragment(placeId)
            }
        
            private fun showPlaceDetailsFragment(placeId: String) {
                placeDetailsFragment = PlaceDetailsCompactFragment.newInstance(
                    ALL_CONTENT,
                    orientation,
                    R.style.CustomizedPlaceDetailsTheme
                )
                supportFragmentManager
                    .beginTransaction()
                    .replace(findViewById<FrameLayout>(R.id.place_details_fragment_host).id, placeDetailsFragment!!)
                    .commitNow()
                placeDetailsFragment?.loadWithPlaceId(placeId)
            }
        }               
        
        

ปรับแต่งรายละเอียดสถานที่

ชุด UI ของ Places นำเสนอแนวทางระบบการออกแบบสำหรับการปรับแต่งภาพโดยอิงตาม Material Design โดยคร่าวๆ (มีการแก้ไขบางอย่างสำหรับ Google Maps โดยเฉพาะ) ดูข้อมูลอ้างอิงเกี่ยวกับสีและการพิมพ์ของ Material Design โดยค่าเริ่มต้น สไตล์จะเป็นไปตามภาษาการออกแบบภาพของ Google Maps

สำคัญ: เมื่อทำการแก้ไขภาพ คุณต้องปฏิบัติตามข้อกำหนดการระบุแหล่งที่มาของ Google Maps

เมื่อสร้างอินสแตนซ์ของข้อมูลโค้ด คุณสามารถระบุธีมที่ลบล้างแอตทริบิวต์สไตล์เริ่มต้นได้ แอตทริบิวต์ธีมที่ไม่ได้ลบล้างจะใช้รูปแบบเริ่มต้น หากต้องการรองรับธีมมืด คุณสามารถเพิ่มรายการสำหรับสีใน values-night/colors.xml

  <style name="CustomizedPlaceDetailsTheme" parent="PlacesMaterialsTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
  
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
  
    <item name="placesCornerRadius">20dp</item>
  </style>

คุณสามารถปรับแต่งสไตล์ต่อไปนี้ได้

แอตทริบิวต์ธีม	การใช้งาน
สี
placesColorSurface	พื้นหลังของคอนเทนเนอร์และกล่องโต้ตอบ
placesColorOnSurface	บรรทัดแรก เนื้อหาของกล่องโต้ตอบ
placesColorOnSurfaceVariant	ข้อมูลสถานที่
placesColorPrimary	ลิงก์
placesColorOutlineDecorative	เส้นขอบคอนเทนเนอร์
placesColorSecondaryContainer	พื้นหลังของปุ่ม
placesColorOnSecondaryContainer	ข้อความและไอคอนของปุ่ม
placesColorPositive	ติดป้ายกำกับ "เปิด" เลย
placesColorNegative	ติดป้ายกำกับ "ปิด" ไว้
placesColorInfo	ไอคอนทางเข้าที่รองรับเก้าอี้รถเข็น
การจัดวางตัวอักษร
placesTextAppearanceHeadlineMedium	บรรทัดแรกในกล่องโต้ตอบ
placesTextAppearanceTitleSmall	ชื่อสถานที่
placesTextAppearanceBodyMedium	เนื้อหาของกล่องโต้ตอบ
placesTextAppearanceBodySmall	ข้อมูลสถานที่
placesTextAppearanceLabelLarge	ป้ายกำกับของปุ่ม
มุม
placesCornerRadius	มุมของคอนเทนเนอร์
การระบุแหล่งที่มาของแบรนด์ Google Maps
placesColorAttributionLight	ปุ่มการระบุแหล่งที่มาและการเปิดเผยข้อมูลของ Google Maps ในธีมสว่าง (ชุดค่าผสมสำหรับสีขาว เทา และสีดํา)
placesColorAttributionDark	ปุ่มการระบุแหล่งที่มาและการเปิดเผยข้อมูลของ Google Maps ในธีมมืด (ลิสต์สำหรับสีขาว สีเทา และสีดํา)

ความกว้างและความสูง

สำหรับมุมมองแนวตั้ง ความกว้างที่แนะนำคือระหว่าง 180dp ถึง 300dp สำหรับมุมมองแนวนอน ความกว้างที่แนะนำคือระหว่าง 180dp ถึง 500dp มุมมองที่เล็กกว่า 160dp อาจแสดงผลไม่ถูกต้อง

แนวทางปฏิบัติแนะนำคืออย่าตั้งค่าความสูง ซึ่งจะช่วยให้เนื้อหาในหน้าต่างกำหนดความสูงได้เพื่อให้ข้อมูลทั้งหมดแสดง

หมายเหตุ: รูปภาพขนาดย่อของสถานที่จะไม่ปรากฏในมุมมองที่กว้างน้อยกว่า 350 dp

สีการระบุแหล่งที่มา

ข้อกำหนดในการให้บริการของ Google Maps กำหนดให้คุณใช้สีของแบรนด์ 1 ใน 3 สีสำหรับการระบุแหล่งที่มาของ Google Maps การระบุแหล่งที่มานี้ต้องมองเห็นได้และเข้าถึงได้เมื่อมีการเปลี่ยนแปลงการปรับแต่ง

เรามีสีของแบรนด์ให้เลือก 3 สี ซึ่งสามารถตั้งค่าแยกกันสำหรับธีมสีอ่อนและสีเข้ม

• ธีมสว่าง: placesColorAttributionLight ที่มีชุดค่าผสมสำหรับสีขาว สีเทา และสีดํา
• ธีมมืด: placesColorAttributionDark ที่มีชุดค่าผสมสำหรับสีขาว สีเทา และสีดํา

ตัวอย่างการปรับแต่ง

หมายเหตุ: หากไม่ได้ระบุการปรับแต่งภาพ ระบบจะเก็บค่าเริ่มต้นไว้

ตัวอย่างนี้จะปรับแต่งเนื้อหามาตรฐาน

  val fragmentStandardContent = PlaceDetailsCompactFragment.newInstance(
    orientation,
    PlaceDetailsCompactFragment.STANDARD_CONTENT,
    R.style.CustomizedPlaceDetailsTheme
  )

ตัวอย่างนี้จะปรับแต่งตัวเลือกเนื้อหา

  val placeDetailsFragment = PlaceDetailsCompactFragment.newInstance(
    orientation,
    listOf(
        Content.ADDRESS,
        Content.ACCESSIBLE_ENTRANCE,Content.MEDIA
    ),
    R.style.CustomizedPlaceDetailsTheme
)
  

ตัวอย่างนี้จะปรับแต่งตัวเลือก Content ทั้งหมด

  val fragmentAllContent = PlaceDetailsCompactFragment.newInstance(
    orientation,
    PlaceDetailsCompactFragment.ALL_CONTENT,
    R.style.CustomizedPlaceDetailsTheme
  )