AdvancedPlaceListElement è un elemento HTML che esegue il rendering di una raccolta di luoghi in un elenco in base ai nomi delle risorse dei luoghi.
L'elemento Elenco luoghi avanzato offre funzionalità avanzate, tra cui la personalizzazione dei pulsanti di azione, la configurazione dell'attribuzione dei luoghi e la gestione degli errori.
Utilizzo di base
Per utilizzare il componente, aggiungi un elemento <gmp-advanced-place-list> alla pagina e trasmetti un elenco separato da virgole di nomi delle risorse dei luoghi tramite l'attributo 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>Funzionalità avanzate
Personalizzare i pulsanti di azione
Aggiungi i pulsanti di azione come elementi secondari all'interno dell'elemento
<template slot="place-list-item"> del componente Elenco luoghi avanzato. Utilizza <gmp-place-link> per le connessioni di navigazione standard
e specifica esplicitamente l'attributo action. Facoltativamente, puoi specificare l'attributo slot. Le azioni predefinite valide sono open-website,
open-directions, open-map, e call. Se
l'attributo slot viene omesso, il valore predefinito è
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>Configurare l'attribuzione dei luoghi
Per configurare l'attribuzione visiva, aggiungi un
<gmp-place-attribution> elemento per visualizzare le configurazioni di attribuzione dei dati delle API Maps
generali, ad esempio l'origine di una foto o di una recensione.
Deve essere aggiunto come elemento pari livello diretto di <template>.
Le attribuzioni inserite all'interno dell'elemento <template> verranno ignorate.
<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>Gestire gli errori
Puoi ascoltare l'evento gmp-error per gestire in modo normale
gli scenari in cui uno o più luoghi richiesti non vengono caricati.
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); });