Эта страница переведена с помощью Cloud Translation API.

Расширенный элемент поиска мест (предварительная версия)

Элемент AdvancedPlaceSearchElement — это HTML-элемент, который отображает результаты поиска мест в виде списка. Существует два способа настройки элемента gmp-advanced-place-search :

Для поиска мест определенного типа в заданной области используйте запрос поиска поблизости , чтобы отобразить результаты поиска с помощью элемента PlaceNearbySearchRequestElement .
Для поиска мест в заданной области на основе текстового запроса используйте поиск по текстовому запросу , чтобы отобразить результаты поиска с помощью элемента PlaceTextSearchRequestElement .

Как поиск поблизости, так и текстовый поиск предлагают одинаковые расширенные функции , включая настройку кнопок действий, фильтрацию отзывов и медиафайлов, настройку атрибуции мест, а также обработку выбора мест и ошибок.

Поиск запроса поблизости

Выберите тип населенного пункта из меню, чтобы просмотреть результаты поиска поблизости для этого типа населенного пункта.

Поиск поблизости в основном настроен на поиск по типу места и местоположению, а результаты могут быть ранжированы по расстоянию или популярности с помощью свойства rankPreference . Дополнительные сведения см. в справочной документации класса PlaceNearbySearchRequestElement .

В этом примере элемент расширенного поиска мест отображается в ответ на поиск поблизости с выбранным пользователем типом места. Также отображается элемент AdvancedPlaceDetailsCompactElement для выбранного места.

Чтобы добавить элемент расширенного поиска мест на карту, добавьте на HTML-страницу элемент gmp-advanced-place-search с вложенным элементом gmp-place-nearby-search-request .

<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 обновляется, и элемент расширенного поиска мест отображает результаты.

Поиск по текстовому запросу

Введите поисковый запрос в поле ввода и нажмите кнопку «Поиск» , чтобы получить список мест, соответствующих запросу.

Поиск по тексту в основном настроен на поиск с использованием текстового запроса и местоположения, а результаты могут быть уточнены по уровню цены, рейтингу и тому, открыты ли они в данный момент. Результаты также могут быть ранжированы по расстоянию или популярности с помощью свойства rankPreference . Дополнительные сведения см. в справочной документации класса PlaceTextSearchRequestElement .

В этом примере элемент расширенного поиска мест отображается в ответ на текстовый ввод пользователя. Также отображается элемент AdvancedPlaceDetailsCompactElement для выбранного места.

Чтобы добавить элемент расширенного поиска мест на карту, добавьте на HTML-страницу элемент gmp-advanced-place-search с вложенным элементом gmp-place-text-search-request .

<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 , и элемент «Расширенный поиск мест» отображает результаты.

Расширенные функции

Настройка кнопок действий

Добавьте кнопки действий в качестве дочерних элементов внутри элемента <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);
});

Расширенный элемент поиска мест (предварительная версия) Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.