Erweitertes Listenelement für Orte (Vorschau)

Das AdvancedPlaceListElement ist ein HTML-Element, das eine Liste von Orten anhand ihrer Ortsressourcennamen rendert.

Das Element „Erweiterte Ortsliste“ bietet erweiterte Funktionen, darunter das Anpassen von Aktionsschaltflächen, das Konfigurieren der Ortsattribution und die Fehlerbehandlung.

Grundlegende Nutzung

Wenn Sie die Komponente verwenden möchten, fügen Sie Ihrer Seite ein <gmp-advanced-place-list> Element hinzu und übergeben Sie eine durch Kommas getrennte Liste von Ortsressourcennamen über das places Attribut. 

<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>

Erweiterte Funktionen

Aktionsschaltflächen anpassen

Fügen Sie Aktionsschaltflächen als untergeordnete Elemente in das <template slot="place-list-item"> Element der Komponente „Erweiterte Ortsliste“ ein. Verwenden Sie <gmp-place-link> für standard Navigationsverbindungen und geben Sie das action Attribut explizit an. Optional können Sie das Attribut slot angeben. Gültige vordefinierte Aktionen sind open-website, open-directions, open-map, und call. Wenn das Attribut slot weggelassen wird, wird standardmäßig action-main verwendet. 

<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>

Ortsattribution konfigurieren

Wenn Sie die visuelle Attribution konfigurieren möchten, fügen Sie ein <gmp-place-attribution> Element hinzu, um übergreifende Datenattributionskonfigurationen für die Maps API anzuzeigen, z. B. die Quelle eines Fotos oder einer Rezension. Es muss als direktes gleichgeordnetes Element des <template> hinzugefügt werden. Attributionen, die innerhalb des <template> Elements platziert werden, werden ignoriert. 

<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>

Fehler verarbeiten

Sie können auf das Ereignis gmp-error warten, um Szenarien zu verarbeiten , in denen ein oder mehrere angeforderte Orte nicht geladen werden können. 

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);
});