Zaawansowany element wyszukiwania miejsc (wersja testowa)

AdvancedPlaceSearchElement to element HTML, który wyświetla wyniki wyszukiwania miejsc w postaci listy. Element gmp-advanced-place-search można skonfigurować na 2 sposoby:

Zarówno wyszukiwanie w pobliżu, jak i wyszukiwanie tekstu oferują te same funkcje zaawansowane, w tym dostosowywanie przycisków działania, filtrowanie opinii i multimediów, konfigurowanie informacji o źródle miejsca oraz obsługę wyboru miejsca i błędów.

Żądanie wyszukiwania w pobliżu

Wybierz typ miejsca z menu, aby zobaczyć wyniki wyszukiwania w pobliżu dla tego typu miejsca.

Wyszukiwanie w pobliżu jest skonfigurowane głównie do wyszukiwania według typu miejsca i lokalizacji, a wyniki można sortować według odległości lub popularności za pomocą rankPreference właściwości. Więcej informacji znajdziesz w dokumentacji referencyjnej klasy PlaceNearbySearchRequestElement.

Ten przykład wyświetla zaawansowany element wyszukiwania miejsc w odpowiedzi na a wyszukiwanie w pobliżu z typem miejsca wybranym przez użytkownika. Wyświetla też element AdvancedPlaceDetailsCompactElement dla wybranego miejsca.

Aby dodać zaawansowany element wyszukiwania miejsc do mapy, dodaj do strony HTML element gmp-advanced-place-search z zagnieżdżonym elementem gmp-place-nearby-search-request. 

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

Element select umożliwia użytkownikowi wybranie typu miejsca z menu. Dla uproszczenia wymienione są tylko 3 typy miejsc: restauracja, kawiarnia, i stacja ładowania EV. 

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

Gdy użytkownik wybierze typ miejsca z menu, element gmp-place-nearby-search-request zostanie zaktualizowany, a zaawansowany element wyszukiwania miejsc wyświetli wyniki.

Żądanie wyszukiwania tekstu

Wpisz wyszukiwane hasło w polu do wprowadzania danych i kliknij przycisk Szukaj , aby uzyskać listę miejsc pasujących do tego hasła.

Wyszukiwanie tekstu jest skonfigurowane głównie do wyszukiwania za pomocą zapytania tekstowego i lokalizacji, a wyniki można zawęzić według poziomu cen, oceny i tego, czy miejsce jest obecnie otwarte. Wyniki można też sortować według odległości lub popularności za pomocą właściwości rankPreference. Więcej informacji znajdziesz w dokumentacji referencyjnej klasy PlaceTextSearchRequestElement.

Ten przykład wyświetla zaawansowany element wyszukiwania miejsc w odpowiedzi na tekst wpisany przez użytkownika. Wyświetla też element AdvancedPlaceDetailsCompactElement dla wybranego miejsca.

Aby dodać zaawansowany element wyszukiwania miejsc do mapy, dodaj do strony HTML element gmp-advanced-place-search z zagnieżdżonym elementem gmp-place-text-search-request. 

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

Element input umożliwia użytkownikowi wpisanie tekstu wyszukiwania. 

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

Gdy użytkownik kliknie przycisk Szukaj, zostanie uruchomiona funkcja wyszukiwania, element gmp-place-text-search-request zostanie zaktualizowany, a zaawansowany element wyszukiwania miejsc wyświetli wyniki.

Funkcje zaawansowane

Dostosowywanie przycisków działania

Dodaj przyciski działania jako elementy podrzędne w elemencie <template slot="place-list-item"> zaawansowanego komponentu wyszukiwania miejsc. W przypadku standardowych połączeń nawigacyjnych użyj elementu <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-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <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-search>

Filtrowanie opinii i multimediów

Ten przykładowy kod wyświetla tylko multimedia i opinie, w których pojawia się słowo „kawa”.

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

Konfigurowanie informacji o źródle miejsca

Aby skonfigurować informacje o źródle wizualnym, dodaj element <gmp-place-attribution> , który będzie wyświetlać ogólne konfiguracje informacji o źródle danych z interfejsu Maps API, takie jak źródło zdjęcia lub opinii. Musisz go dodać jako bezpośredni element równorzędny elementu <template>. Informacje o źródle umieszczone wewnątrz elementu <template> zostaną zignorowane. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <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-search>

Obsługa wyboru miejsca i błędów

Gdy atrybut selectable jest obecny, możesz nasłuchiwać zdarzenia gmp-select aby pobrać miejsce wybrane przez użytkownika. Możesz też nasłuchiwać zdarzenia gmp-error, aby elegancko obsługiwać sytuacje, w których nie można pobrać danych o miejscu. 

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});