L' AdvancedPlaceListElement est un élément HTML qui affiche une collection d'établissements dans une liste en fonction de leur nom de ressource.
L'élément de liste d'établissements avancée offre des fonctionnalités avancées, y compris la personnalisation des boutons d'action, la configuration de l'attribution d'établissement et la gestion des erreurs.
Utilisation de base
Pour utiliser le composant, ajoutez un <gmp-advanced-place-list>
élément à votre page et transmettez une liste de noms de ressources d'établissements séparés par une virgule
via l'places attribute.
<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>Fonctionnalités avancées
Personnaliser les boutons d'action
Ajoutez des boutons d'action en tant qu'enfants dans l'élément
<template slot="place-list-item"> du composant de liste d'établissements avancée. Utilisez <gmp-place-link> pour les connexions de navigation standard
et spécifiez explicitement l'attribut action. Vous pouvez éventuellement spécifier l'attribut slot. Les actions prédéfinies valides sont open-website,
open-directions, open-map, et call. Si
l'attribut slot est omis, la valeur par défaut est
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>Configurer l'attribution d'établissement
Pour configurer l'attribution visuelle, ajoutez un
<gmp-place-attribution> élément afin d'afficher les configurations d'attribution des données de l'API Maps
globales, telles que la source d'une photo ou d'un avis.
Il doit être ajouté en tant qu'élément frère direct de <template>.
Les attributions placées dans l'élément <template> seront ignorées.
<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>Gérer les erreurs
Vous pouvez écouter l'événement gmp-error pour gérer correctement
les scénarios dans lesquels un ou plusieurs établissements demandés ne parviennent pas à se charger.
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); });