Ta strona została przetłumaczona przez Cloud Translation API.

Czym jest Places UI Kit i jak możesz go używać do tworzenia atrakcyjnych rozwiązań?

Wprowadzenie

Dla milionów użytkowników na całym świecie Mapy Google są głównym źródłem dokładnych i aktualnych informacji o miejscach. Bogata baza danych Google obejmująca ponad 250 milionów miejsc na całym świecie, w tym opinie, zdjęcia i oceny użytkowników, zapewnia niezrównany poziom szczegółowości i zaufania. Aby dostarczać aktualne i rzetelne dane, codziennie wprowadzamy na mapie 100 milionów aktualizacji.

Interfejs Places UI Kit to gotowa do użycia, niedroga biblioteka komponentów, która korzysta z obszernych informacji o miejscach w Mapach Google. Umożliwia to zintegrowanie sprawdzonego i znanego interfejsu Miejsc Google z przypadkami użycia w aplikacji na wybranej przez Ciebie mapie.

Komponenty

Interfejs Places UI Kit zawiera zestaw pojedynczych komponentów interfejsu, których można używać osobno lub razem, aby zapewnić płynne działanie Miejsc.

Szczegóły miejsca: ten komponent renderuje szczegółowe informacje o miejscu, takie jak nazwa, adres, numer telefonu, witryna, godziny otwarcia i opinie użytkowników.
Wyszukiwanie miejsc: ten komponent wyświetla listę miejsc w pobliżu według kategorii lub za pomocą wyszukiwania tekstu.
Podstawowe autouzupełnianie miejsca: ten komponent tworzy pole wprowadzania tekstu, w którym wyświetla się lista przewidywanych miejsc pasujących do wpisywanego tekstu.

Najważniejsze zalety interfejsu Places UI Kit

Łatwość użycia: dodawaj do aplikacji sprawdzone funkcje Miejsc w Mapach Google przy użyciu minimalnej ilości kodu.
Używanie na dowolnej mapie: po raz pierwszy możesz używać treści z Miejsc na mapie innej niż Google.
Znany interfejs: komponenty zapewniają interfejs użytkownika zgodny z Mapami Google, dzięki czemu jest on intuicyjny.
Dostosowywanie: zestaw interfejsu Places UI Kit oferuje szerokie możliwości dostosowywania wyglądu bez dodatkowych opłat. Do konfigurowania elementów wyświetlania możesz używać różnych ustawień i niestandardowych właściwości CSS.
Ekonomiczne: interfejs Places UI Kit może być bardziej ekonomicznym rozwiązaniem niż bezpośrednie korzystanie z interfejsu Places API.

Praktyczne przypadki użycia

Interfejs Places UI Kit można stosować w różnych aplikacjach, aby zwiększać wygodę użytkowników.

Aplikacje do odkrywania lokalnych atrakcji: aplikacja z informacjami o atrakcjach może używać komponentu wyszukiwania miejsc do wyświetlania listy pobliskich restauracji, kawiarni lub atrakcji. Gdy użytkownik wybierze miejsce z listy, komponent Szczegóły miejsca może wyświetlić więcej informacji o tej lokalizacji.
Aplikacje do planowania podróży: aplikacja podróżnicza może korzystać z wyszukiwania miejsc, aby umożliwić użytkownikom wyszukiwanie hoteli lub interesujących miejsc w określonym mieście. Komponent Szczegóły miejsca może następnie wyświetlać zdjęcia, oceny i opinie dotyczące każdej lokalizacji, aby ułatwić planowanie.
Portale wyszukiwania nieruchomości: aplikacja do wyszukiwania nieruchomości może używać komponentu wyszukiwania miejsc, aby wyświetlać różne kategorie pobliskich miejsc i pomagać potencjalnym kupującym lub najemcom domów w poznaniu stylu życia w okolicy, zanim umówią się na oglądanie nieruchomości.
Aplikacje do obsługi komunikatorów i mediów społecznościowych: aplikacja do obsługi komunikatorów i mediów społecznościowych może używać wyszukiwania miejsc do wyszukiwania i sugerowania miejsc w pobliżu, aby ułatwić użytkownikom znalezienie miejsca spotkania. Komponent Informacje o miejscu może służyć do wyświetlania szczegółowych informacji o miejscach, gdy użytkownicy udostępniają miejsca. Za pomocą gotowego przycisku Map Google użytkownicy mogą łatwo i dokładnie przeglądać kolejne lokalizacje oraz informacje o podróżach w Mapach Google.

Dostosowywanie

Treści i style komponentów zestawu interfejsu Miejsc Google można dostosować do swoich potrzeb.

Używanie niestandardowych właściwości CSS, np. właściwości CSS komponentu szczegółów miejsca, umożliwia dostosowanie wyglądu komponentów do projektu aplikacji. Możesz dostosować kolory, czcionki i inne aspekty wizualne. Podczas wprowadzania zmian wizualnych należy przestrzegać wymagań dotyczących atrybucji. Możesz na przykład zmienić kolor podstawowy używany w przypadku linków i liczby opinii za pomocą --gmp-mat-color-primary właściwości CSS.

Możesz kontrolować konkretne treści o miejscu, które są wyświetlane, za pomocą zagnieżdżonego elementu gmp-place-content-config, aby wybrać i skonfigurować treści, lub po prostu użyć elementu gmp-place-all-content, aby wyświetlić wszystkie dostępne treści.

W dokumentacji dostępne jest narzędzie do dostosowywania, które pomaga wizualizować różne konfiguracje stylu.

Wskazówki dotyczące implementacji

Interfejs Places UI Kit jest dostępny w Mapach JavaScript oraz w pakietach SDK Miejsc na Android i iOS.

Pierwsze kroki

Aby zacząć korzystać z interfejsu Places UI Kit, wykonaj te czynności:

Skonfiguruj projekt Google Cloud: aby korzystać z Places UI Kit, musisz mieć projekt Cloud z kontem rozliczeniowym.
Włącz Places UI Kit: musisz włączyć Places UI Kit w swoim projekcie.
Uzyskaj klucz interfejsu API: do uwierzytelniania żądań wymagany jest klucz interfejsu API.

Więcej informacji o poszczególnych platformach znajdziesz w przewodniku dla początkujących użytkowników pakietu interfejsu Places w przypadku JavaScript, Android i iOS.

Przykład implementacji

Oto przykład implementacji wyszukiwania miejsca i szczegółów miejsca za pomocą dynamicznych map JavaScript. Użytkownik może wyszukiwać pobliskie miejsca na podstawie dowolnego tekstu. Gdy klikniesz miejsce na liście wyników wyszukiwania, w dynamicznych mapach pojawi się komponent Szczegóły miejsca.

Poniżej znajdziesz fragmenty kodu. Wersję demonstracyjną i pełny kod znajdziesz w tym repozytorium GitHub.

Zanim zaczniesz, wykonaj powyższe czynności z sekcji Wprowadzenie, które dotyczą JavaScriptu.

Wczytaj wymagane biblioteki w HTML-u.

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

W HTML dodaj kontener mapy, pole wprowadzania tekstu i przycisk wyszukiwania. Ten kontener mapy będzie zawierać mapy dynamiczne, które zostaną utworzone w JavaScript. Pole wprowadzania umożliwia użytkownikom wpisywanie zapytań.

<div id="map-container"></div>
<div class="controls">
    <input type="text" class="query-input" />
    <button class="search-button">Search</button>
</div>

Dodaj komponent Wyszukiwanie miejsc. Komponent Wyszukiwanie miejsc udostępnia układy poziome i pionowe. W tym przykładzie używamy układu poziomego. Atrybut „selectable” umożliwia kliknięcie elementu listy wyników wyszukiwania (po kliknięciu zostanie wywołane zdarzenie gmp-select).

W elemencie gmp-place-search dodajemy 2 elementy podrzędne:

gmp-place-all-content służy do wyświetlania wszystkich dostępnych treści
gmp-place-text-search-request służy do konfigurowania elementu Wyszukiwanie miejsc.

W tym przykładzie skonfigurujemy ustawienia w JavaScript.

<div class="list-container">
    <gmp-place-search orientation="horizontal" selectable>
         <gmp-place-all-content></gmp-place-all-content>  
         <gmp-place-text-search-request></gmp-place-text-search-request>
    </gmp-place-search>
</div>

Następnie dodaj komponent Szczegóły miejsca, który jest dostępny w układach kompaktowym i pełnym. Każdy z nich obsługuje orientację pionową i poziomą. W tym przykładzie użyto kompaktowego układu poziomego. Podobnie jak w przypadku komponentu Wyszukiwanie miejsc dodajemy 2 elementy podrzędne:

gmp-place-all-content oznacza wyświetlanie wszystkich dostępnych treści.
gmp-place-details-place-request służy do wybierania miejsca.

W tym przykładzie ustawimy miejsce w JavaScript.

<div id="details-container">
     <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request> 
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact> 
</div>

W JavaScript zaimportuj biblioteki potrzebne w tym przykładzie. Biblioteka Miejsc importuje bibliotekę interfejsu Places UI Kit dla JavaScript.

const {Map} = await google.maps.importLibrary("maps");
await google.maps.importLibrary("places");
({AdvancedMarkerElement} = await google.maps.importLibrary("marker"));
({LatLngBounds, LatLng} = await google.maps.importLibrary("core"));

Tworzenie dynamicznych map.

const mapContainer = document.getElementById("map-container");
const mapOptions = {
    center: {lat: 37.422, lng: -122.085},
    zoom: 12 
};
const gMap = new Map(mapContainer, mapOptions);

Dodaj do przycisku wyszukiwania odbiornik kliknięć, aby rozpocząć wyszukiwanie miejsca. Gdy wczytają się wyniki wyszukiwania, utwórz znaczniki dla każdego miejsca i dodaj do nich odbiornik kliknięć. Kliknięcie znacznika spowoduje wysłanie żądania i wyświetlenie odpowiednich szczegółów miejsca.

Gdy zostaną znalezione miejsca i załaduje się element wyszukiwania miejsc, właściwość places elementu wyszukiwania miejsc zostanie wypełniona tablicą wyników. Każdy wynik to obiekt miejsca zawierający identyfikator miejsca, współrzędne i widoczny obszar. Aby pobrać szczegóły, przekaż identyfikator miejsca lub cały obiekt miejsca do elementu Szczegóły miejsca.

const queryInput = document.querySelector(".query-input");
const searchButton = document.querySelector(".search-button");
const placeSearch = document.querySelector("gmp-place-search");
const placeSearchQuery = document.querySelector("gmp-place-text-search-request");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeRequest = document.querySelector("gmp-place-details-place-request");

placeDetailsPopup = new AdvancedMarkerElement({
    map: null,
    content: placeDetails,
    zIndex: 1
});

searchButton.addEventListener("click", searchPlaces);

function searchPlaces(){    
    if (queryInput.value.trim()) {
        placeSearchQuery.textQuery = queryInput.value.trim();
        placeSearchQuery.locationBias = gMap.getBounds();
        placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
    }
}

async function addMarkers(){
    const bounds = new LatLngBounds();
    placeSearch.places.forEach((place) => {
        let marker = new AdvancedMarkerElement({
            map: gMap,
            position: place.location
        });
        bounds.extend(place.location);
        marker.addListener('click',(event) => {
            placeRequest.place = place;
            placeDetails.style.display = 'block';
            placeDetailsPopup.position = place.location;
            placeDetailsPopup.map = gMap;
            gMap.fitBounds(place.viewport, {top: 200, left: 100});
        });
        gMap.setCenter(bounds.getCenter());
        gMap.fitBounds(bounds);
    });
}

Zapoznaj się z wersją demonstracyjną i pełnym kodem w tym repozytorium GitHub.

Źródła, które pomogą Ci tworzyć

Współtwórcy

Główni autorzy:

Teresa Qin | Inżynier ds. rozwiązań Google Maps Platform

Czym jest Places UI Kit i jak możesz go używać do tworzenia atrakcyjnych rozwiązań? Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.