רכיב מתקדם של רשימת מקומות (תצוגה מקדימה)

‫ ‫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"> של הרכיב Advanced Place List. משתמשים ב-<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 כדי לטפל בצורה תקינה בתרחישים שבהם טעינת מקום אחד או יותר שנכללים בבקשה נכשלת. 

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);
});