Zaawansowany element listy miejsc (wersja testowa)

AdvancedPlaceListElement to element HTML, który renderuje zbiór miejsc na liście na podstawie ich nazw zasobów.

Element zaawansowanej listy miejsc oferuje funkcje zaawansowane, w tym dostosowywanie przycisków poleceń, konfigurowanie atrybucji miejsca i obsługę błędów.

Podstawowe użycie

Aby użyć komponentu, dodaj element <gmp-advanced-place-list> do strony i przekaż listę nazw zasobów miejsc rozdzielonych przecinkami za pomocą atrybutu 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>

Funkcje zaawansowane

Dostosowywanie przycisków poleceń

Dodaj przyciski poleceń jako elementy podrzędne w elemencie <template slot="place-list-item"> komponentu zaawansowanej listy miejsc. W przypadku standardowych połączeń nawigacyjnych użyj <gmp-place-link> i jawnie określ atrybut action. Opcjonalnie możesz określić atrybut slot. Prawidłowe predefiniowane działania to open-website, open-directions, open-map, i call. Jeśli atrybut slot zostanie pominięty, domyślnie przyjmie wartość 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>

Konfigurowanie atrybucji miejsca

Aby skonfigurować atrybucję wizualną, dodaj element <gmp-place-attribution>, który będzie wyświetlać ogólne konfiguracje atrybucji danych interfejsu Maps API, takie jak źródło zdjęcia lub opinii. Należy go dodać jako bezpośredni element równorzędny elementu <template>. Atrybucje umieszczone wewnątrz elementu <template> zostaną zignorowane. 

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

Obsługa błędów

Możesz nasłuchiwać zdarzenia gmp-error, aby elegancko obsługiwać sytuacje, w których nie uda się wczytać co najmniej 1 żądanego miejsca. 

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