عنصر قائمة الأماكن المتقدّمة (معاينة)

هذه الميزة في مرحلة المعاينة (ما قبل التوفّر للجمهور العام). قد يكون الدعم المقدّم للمنتجات والميزات في مرحلة ما قبل التوفّر للجمهور العام محدودًا، وقد لا تكون التغييرات التي يتم إجراؤها على المنتجات والميزات هنا متوافقة مع الإصدارات الأخرى من هذه المرحلة. تخضع عروض مرحلة ما قبل التوفّر للجمهور العام لبنود الخدمة المحدّدة في "منصة خرائط Google". لمزيد من المعلومات، يُرجى الاطّلاع على أوصاف مراحل الإطلاق.

‫ 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 للتعامل بشكل سليم مع السيناريوهات التي يتعذّر فيها تحميل مكان واحد أو أكثر من الأماكن المطلوبة.

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