O AdvancedPlaceListElement é um elemento HTML que renderiza uma coleção de lugares em uma lista, considerando os nomes de recursos de lugar.
O elemento de lista de lugares avançada oferece recursos avançados, incluindo a personalização de botões de ação, a configuração da atribuição de lugar e o tratamento de erros.
Uso básico
Para usar o componente, adicione um <gmp-advanced-place-list>
elemento à página e transmita uma lista separada por vírgulas de nomes de recursos de lugar
usando o atributo 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>Recursos avançados
Personalizar botões de ação
Adicione botões de ação como filhos dentro do
<template slot="place-list-item"> elemento do componente de lista de lugares avançada. Use <gmp-place-link> para conexões de navegação padrão e especifique explicitamente o atributo action. Também é possível especificar o atributo slot. As ações predefinidas válidas são open-website,
open-directions, open-map, e call. Se
o atributo slot for omitido, o padrão será
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>Configurar a atribuição de lugar
Para configurar a atribuição visual, adicione um
<gmp-place-attribution> elemento para mostrar as configurações gerais de atribuição de dados da API Maps, como a origem de uma foto ou avaliação.
Ele precisa ser adicionado como um irmão direto do <template>.
As atribuições colocadas dentro do elemento <template> serão ignoradas.
<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>Solucionar erros
É possível detectar o evento gmp-error para processar
cenários em que um ou mais lugares solicitados não são carregados.
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); });