عنصر فهرست مکان پیشرفته (پیش‌نمایش)

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