Элемент AdvancedPlaceListElement — это HTML-элемент, который отображает коллекцию мест в виде списка, заданного их именами ресурсов мест (Place Resource Names).
Расширенный элемент «Список мест» предлагает дополнительные возможности , включая настройку кнопок действий, конфигурацию атрибуции мест и обработку ошибок.
Основное использование
Для использования компонента добавьте на страницу элемент <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); });