องค์ประกอบรายการสถานที่ขั้นสูง (ตัวอย่าง)

AdvancedPlaceListElement เป็นองค์ประกอบ HTML ที่แสดงคอลเล็กชันของสถานที่ในรายการตาม ชื่อทรัพยากรของสถานที่

องค์ประกอบรายการสถานที่ขั้นสูงมี ฟีเจอร์ขั้นสูง ซึ่งรวมถึงการปรับแต่ง ปุ่มการดำเนินการ การกำหนดค่าการแสดงที่มาของสถานที่ และการจัดการข้อผิดพลาด

การใช้งานพื้นฐาน

หากต้องการใช้คอมโพเนนต์ ให้เพิ่มองค์ประกอบ <gmp-advanced-place-list> ลงในหน้าเว็บและส่งรายการชื่อทรัพยากรของสถานที่ที่คั่นด้วยคอมมา ผ่านแอตทริบิวต์ places 

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU,places/ChIJyWEHuEmuEmsRm9hTkapTCrk">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-address></gmp-place-address>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-list>

ฟีเจอร์ขั้นสูง

ปรับแต่งปุ่มการดำเนินการ

เพิ่มปุ่มการดำเนินการเป็นองค์ประกอบย่อยภายในองค์ประกอบ <template slot="place-list-item"> ของคอมโพเนนต์รายการสถานที่ขั้นสูง ใช้ <gmp-place-link> สำหรับการเชื่อมต่อการนำทางมาตรฐาน และระบุแอตทริบิวต์ action อย่างชัดเจน คุณระบุแอตทริบิวต์ slot ได้โดยไม่บังคับ การดำเนินการที่กำหนดไว้ล่วงหน้าที่ถูกต้องคือ open-website, open-directions, open-map, และ call หากละเว้นแอตทริบิวต์ slot ระบบจะใช้ค่าเริ่มต้นเป็น action-main 

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-list>

กำหนดค่าการแสดงที่มาของสถานที่

หากต้องการกำหนดค่าการแสดงที่มาแบบภาพ ให้เพิ่มองค์ประกอบ <gmp-place-attribution> เพื่อแสดงการกำหนดค่าการแสดงที่มาของข้อมูล Maps API โดยรวม เช่น แหล่งที่มาของรูปภาพหรือรีวิว ต้องเพิ่มเป็นองค์ประกอบระดับเดียวกันโดยตรงของ <template> ระบบจะละเว้นการแสดงที่มาที่วางไว้ ภายใน องค์ประกอบ <template> 

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-list>

จัดการข้อผิดพลาด

คุณสามารถฟังเหตุการณ์ gmp-error เพื่อจัดการสถานการณ์อย่างเหมาะสมเมื่อสถานที่ที่ขออย่างน้อย 1 แห่งโหลดไม่สำเร็จ 

const listElement = document.querySelector('gmp-advanced-place-list');
listElement.addEventListener('gmp-error', (e) => {
  // e.detail.errors contains an array of failure objects with specific failed Resource Names
  console.error('Failed to load places: ', e.detail.errors);
});