Gelişmiş Yer Listesi Öğesi (önizleme)

AdvancedPlaceListElement, Yer Kaynak Adları verilen bir listedeki yerler koleksiyonunu oluşturmak için kullanılan bir HTML öğesidir.

Gelişmiş Yer Listesi Öğesi, işlem düğmelerini özelleştirme, Yer ilişkilendirmesini yapılandırma ve hataları işleme gibi ileri seviye özellikler sunar.

Temel kullanım

Bileşeni kullanmak için sayfanıza bir <gmp-advanced-place-list> öğesi ekleyin ve places özelliği aracılığıyla virgülle ayrılmış yer kaynağı adları listesini iletin. 

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

Gelişmiş özellikler

İşlem düğmelerini özelleştirme

Gelişmiş Yer Listesi bileşeninin <template slot="place-list-item"> öğesine alt öğe olarak işlem düğmeleri ekleyin. Standart gezinme bağlantıları için <gmp-place-link> özelliğini kullanın ve action özelliğini açıkça belirtin. İsteğe bağlı olarak slot özelliğini belirtebilirsiniz. Geçerli önceden tanımlanmış işlemler open-website, open-directions, open-map ve call şeklindedir. slot özelliği atlanırsa varsayılan olarak action-main değeri kullanılır. 

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

Yer atfını yapılandırma

Görsel ilişkilendirmeyi yapılandırmak için <gmp-place-attribution> öğesi ekleyerek bir fotoğrafın veya yorumun kaynağı gibi kapsamlı Haritalar API veri ilişkilendirme yapılandırmalarını görüntüleyin. <template> öğesinin doğrudan eşdüzey öğesi olarak eklenmelidir. <template> öğesinin içine yerleştirilen ilişkilendirmeler yoksayılır. 

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

Hataları işleme

İstenen yerlerden bir veya daha fazlası yüklenemediğinde senaryoları sorunsuz bir şekilde işlemek için gmp-error etkinliğini dinleyebilirsiniz. 

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