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

عنصر AdvancedPlaceSearchElement یک عنصر HTML است که نتایج جستجوی مکان را در یک لیست نمایش می‌دهد. دو روش برای پیکربندی عنصر gmp-advanced-place-search وجود دارد:

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

جستجوی درخواست در نزدیکی

برای مشاهده نتایج جستجوی نزدیک برای آن نوع مکان، نوع مکان را از منو انتخاب کنید.

جستجوی نزدیک در درجه اول برای جستجو بر اساس نوع مکان و موقعیت مکانی پیکربندی شده است و نتایج را می‌توان با استفاده از ویژگی rankPreference بر اساس فاصله یا محبوبیت رتبه‌بندی کرد. برای جزئیات بیشتر به مستندات مرجع کلاس PlaceNearbySearchRequestElement مراجعه کنید.

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

برای افزودن عنصر جستجوی پیشرفته مکان به نقشه، یک عنصر gmp-advanced-place-search را به همراه یک عنصر gmp-place-nearby-search-request در تو به صفحه HTML اضافه کنید.

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

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

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

وقتی کاربر نوع مکانی را از منو انتخاب می‌کند، عنصر gmp-place-nearby-search-request به‌روزرسانی می‌شود و عنصر Advanced Place Search نتایج را نمایش می‌دهد.

جستجو بر اساس درخواست متنی

عبارت مورد نظر خود را در کادر جستجو وارد کنید و روی دکمه جستجو کلیک کنید تا لیستی از مکان‌های منطبق با عبارت مورد نظر نمایش داده شود.

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

این مثال عنصر جستجوی پیشرفته مکان را در پاسخ به ورودی متن کاربر رندر می‌کند. همچنین یک عنصر AdvancedPlaceDetailsCompactElement برای مکان انتخاب شده نمایش می‌دهد.

برای افزودن عنصر جستجوی پیشرفته مکان به نقشه، یک عنصر gmp-advanced-place-search را به همراه یک عنصر gmp-place-text-search-request تو در تو به صفحه HTML اضافه کنید.

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

عنصر input به کاربر اجازه می‌دهد متن جستجو را وارد کند.

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

وقتی کاربر روی دکمه جستجو کلیک می‌کند، تابع جستجو اجرا می‌شود، عنصر gmp-place-text-search-request به‌روزرسانی می‌شود و عنصر Advanced Place Search نتایج را نمایش می‌دهد.

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

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

دکمه‌های عملیاتی را به عنوان فرزند درون عنصر <template slot="place-list-item"> از کامپوننت جستجوی پیشرفته مکان اضافه کنید. برای اتصالات ناوبری استاندارد <gmp-place-link> استفاده کنید و ویژگی action را به طور صریح مشخص کنید. می‌توانید به صورت اختیاری ویژگی slot را نیز مشخص کنید. اقدامات از پیش تعریف شده معتبر عبارتند از open-website ، open-directions ، open-map و call . اگر ویژگی slot حذف شود، به طور پیش فرض action-main در نظر گرفته می‌شود.

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <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-search>

فیلتر کردن نظرات و رسانه‌ها

این نمونه کد فقط رسانه‌ها و نقدهایی را نشان می‌دهد که به «قهوه» اشاره کرده‌اند.

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

پیکربندی انتساب مکان

برای پیکربندی انتساب بصری، یک عنصر <gmp-place-attribution> اضافه کنید تا پیکربندی‌های کلی انتساب داده‌های Maps API، مانند منبع یک عکس یا نقد، نمایش داده شود. این عنصر باید به عنوان یک عنصر هم‌خانواده مستقیم از <template> اضافه شود. انتساب‌هایی که درون عنصر <template> قرار می‌گیرند، نادیده گرفته می‌شوند.

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <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-search>

مدیریت انتخاب مکان و خطاها

وقتی ویژگی selectable وجود دارد، می‌توانید منتظر رویداد gmp-select باشید تا مکان انتخاب شده کاربر را بازیابی کنید. همچنین می‌توانید منتظر رویداد gmp-error باشید تا در مواقعی که داده‌های مکان در دریافت با شکست مواجه می‌شوند، به درستی مدیریت شوند.

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});