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

AdvancedPlaceListElement یک عنصر HTML است که مجموعه‌ای از مکان‌ها را در یک لیست با توجه به نام‌های منبع مکان آنها رندر می‌کند.

عنصر فهرست مکان پیشرفته ویژگی‌های پیشرفته‌ای از جمله سفارشی‌سازی دکمه‌های عملیاتی، پیکربندی نسبت‌دهی مکان و مدیریت خطاها را ارائه می‌دهد.

کاربرد اولیه

برای استفاده از این کامپوننت، یک عنصر <gmp-advanced-place-list> به صفحه خود اضافه کنید و لیستی از نام‌های منابع مکان که با فاصله از هم جدا شده‌اند را از طریق ویژگی places ارسال کنید.

یک نمونه کد کامل را ببینید

تایپ اسکریپت 

async function init() {
    await google.maps.importLibrary('places');
    await customElements.whenDefined('gmp-advanced-place-list');
    const listElement = document.querySelector('gmp-advanced-place-list');

    if (listElement) {
        listElement.addEventListener('gmp-error', (e: Event) => {
            const customEvent = e as CustomEvent<{ errors?: unknown }>;
            console.error(
                'Failed to load places: ',
                customEvent.detail.errors ?? customEvent
            );
        });
    }
}

void init();

جاوا اسکریپت 

async function init() {
    await google.maps.importLibrary('places');
    await customElements.whenDefined('gmp-advanced-place-list');
    const listElement = document.querySelector('gmp-advanced-place-list');

    if (listElement) {
        listElement.addEventListener('gmp-error', (e) => {
            const customEvent = e;
            console.error(
                'Failed to load places: ',
                customEvent.detail.errors ?? customEvent
            );
        });
    }
}

void init();

سی‌اس‌اس 

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Roboto, Arial, sans-serif;
}

اچ‌تی‌ام‌ال 

<!doctype html>
<html>
    <head>
        <title>Advanced Place List</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY",
                v: "beta"
            });
        </script>
    </head>
    <body>
        <gmp-advanced-place-list
            places="places/ChIJLU7jZClu5kcR4PcOOO6p3I0 places/ChIJrRMgU7ZhLxMRxAOFkC7I8Sg places/ChIJbf8C1yFxdDkR3n12P4DkKt0 places/ChIJPTacEpBQwokRKwIlDXelxkA places/ChIJVVVViV-abZERJxqgpA43EDo">
            <template slot="details-item">
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-media query="coffee"></gmp-place-media>
            </template>
        </gmp-advanced-place-list>
    </body>
</html>

ویژگی‌های پیشرفته

سفارشی‌سازی دکمه‌های عملیاتی

دکمه‌های عملیاتی را به عنوان فرزند درون عنصر <template slot="details-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="details-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="details-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);
});